dw 下拉菜单

最新推荐文章于 2021-11-07 15:38:15 发布
最新推荐文章于 2021-11-07 15:38:15 发布
阅读量2.3k 收藏 12
点赞数 4
分类专栏： 前端工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzi_angel/article/details/45481295
版权 
下拉菜单实现代码：


<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
	padding:0;
	margin:0;
	}
#caidan{
	width:810px;
	height:auto;
	margin:10px auto;
	}
#caidan ul{
	list-style-type:none;
	}
#caidan ul li.mu{
	width:90px;
	height:40px;
	float:left;
	line-height:40px;
	margin-right:10px;
	text-align:center;
	background:#cfcfcf;
	position:relative;
	}
#caidan a:link,#caidan a:visited,#caidan a:hover{
	text-decoration:none;
	color:#000;
	}
	.caidan{
	width: 90px;
	position: absolute;
	display:none;
	padding-top:5px;
	
		}
	.kong{
		background:pink;
		}	
</style>
<script>
function xianshi1(){
	document.getElementById("cd1").style.display = "block";
	}
function yincang1(){
	document.getElementById("cd1").style.display = "none";
	}
function xianshi2(){
	document.getElementById("cd2").style.display = "block";
	}
function yincang2(){
	document.getElementById("cd2").style.display = "none";
	}
function xianshi3(){
	document.getElementById("cd3").style.display = "block";
	}
function yincang3(){
	document.getElementById("cd3").style.display = "none";
	}
function xianshi4(){
	document.getElementById("cd4").style.display = "block";
	}
function yincang4(){
	document.getElementById("cd4").style.display = "none";
	}
function xianshi5(){
	document.getElementById("cd5").style.display = "block";
	}
function yincang5(){
	document.getElementById("cd5").style.display = "none";
	}
function xianshi6(){
	document.getElementById("cd6").style.display = "block";
	}
function yincang6(){
	document.getElementById("cd6").style.display = "none";
	}
function xianshi7(){
	document.getElementById("cd7").style.display = "block";
	}
function yincang7(){
	document.getElementById("cd7").style.display = "none";
	}
function xianshi8(){
	document.getElementById("cd8").style.display = "block";
	}
function yincang8(){
	document.getElementById("cd8").style.display = "none";
	}
</script>
</head>

<body>
<div id="caidan">
    <ul>
       <li class="mu" onMouseOver="xianshi1()" onMouseOut="yincang1()">
           <a href="#">首页</a>
           <div id="cd1" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi2()" onMouseOut="yincang2()">
            <a href="#">首页</a>
            <div id="cd2" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi3()" onMouseOut="yincang3()">
            <a href="#">首页</a>
            <div id="cd3" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi4()" onMouseOut="yincang4()">
            <a href="#">首页</a>
            <div id="cd4" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi5()" onMouseOut="yincang5()">
            <a href="#">首页</a>
            <div id="cd5" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi6()" onMouseOut="yincang6()">
            <a href="#">首页</a>
            <div id="cd6" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi7()" onMouseOut="yincang7()">
            <a href="#">首页</a>
            <div id="cd7" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
        <li class="mu" onMouseOver="xianshi8()" onMouseOut="yincang8()">
            <a href="#">首页</a>
            <div id="cd8" class="caidan">
               <div class="kong">
               <ul>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
                    <li><a href="#">子项目</a></li>
               </ul>
               </div>

            </div>
        </li>
    </ul>
</div>
</body>
</html>



下拉菜单实现页面：

YZiAngel
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
dw二级下拉菜单插件
03-07
二级下拉菜单插件二级下拉菜单插件二级下拉菜单插件二级下拉菜单插件
dw php分页插件,下拉菜单做翻页的通用代码
weixin_31807353的博客
03-12 257
这是一个用下拉菜单来做翻页的通用代码，我觉得这样做比较省空间，蛮好的其实这个代码就是老外的那个翻页插件，后来是哪位好朋友(不好意思，忘了)修改后放在论坛上的，我还做成过插件，其实光是拷贝也挺方便的。还有最后一段是前后翻页的按钮，呵呵，这个还是ccjat提醒后加上的，用不用都随便咯。记录集名字_total = 记录集名字.RecordCountIf (记录集名字_numRows < 0) Th...
显示隐藏层实现的下拉菜单
tgw2000的专栏
01-20 1065
将下拉菜单的代码放入一个单元格中，如下：（显示隐藏层的js脚本没有写，可以从dw中生成）                                                                                                                                        sql="SELECT c
下拉菜单框
ln201009的博客
11-07 1328
1、首先，我们先进入DW里面新建一个html文档，改一下title为下拉菜单。 2、先给一个放全部内容的div盒子命名为menu。 3、接着再给一个div命名为xlcd。用于放置一级菜单和二级菜单的内容。一级菜单用h3标签。 4、在h3标签下面放置一个ul无序列表，里面放置三个li标签，内容分别为二级菜单1，二级菜单2，二级菜单3。接下来我们就设置style样式。 5、我们先设置xlcd和ul标签的宽和背景颜色，xlcd的宽为200px 背景颜色设为红色。ul标签的宽
dw添加下拉菜单_怎样用dreamweaver制作网站下拉菜单
weixin_36314050的博客
01-17 4566
展开全部一、打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站e69da5e6ba9062616964757a686964616f31333363386664导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接：#。然后保存该网页文件。二、点击 窗口-行为 菜单，打开行为面板。三、选中第一步输入的文字，点行为面板上的+号，在弹出的菜单中选-显示弹出式菜单。...
dw添加下拉菜单_Dreamweaver怎么创建下拉菜单
weixin_39743414的博客
01-17 8612
一、在Dreamweaver中创建弹出式菜单1. 点击鼠标，将光标放在表单框线内，点击“插入”菜单，选择“表单”项，在弹出的子菜单中选择“选择(列表/菜单)”命令。或者在“插入”面板中选择“表单”项，点击“选择(列表/菜单)”图标，如下图所示： 点击“窗口”菜单，选择“插入”项，可以打开“插入”面板。2. 点击“选择(列表/菜单)”图标后，弹出“输入标签辅助功能属性”对话框，在对话框中设置后，单击...
DW前端代码汇总
HCTLTCT的博客
04-29 9604
DW前端代码汇总 ==============================前端代码============================ ------------------------------------*标签*--------------------------------- <button></button>--按钮标签 <ul></ul>---段落标签 <u></u>--下划线 <link r...
dw添加下拉菜单_dreamweaver cs6中网页制作一个带有列表下拉菜单的详细操作方法...
weixin_39970668的博客
01-17 4390
原创dreamweaver cs6中网页制作一个带有列表下拉菜单的详细操作方法编辑:小禾 来源:PC下载网时间:2019-07-08 14:01:41很多的程序员们都在使用dreamweaver cs6软件，不过你们晓得dreamweaver cs6中网页怎么制作一个带有列表下拉菜单呢?下文就为你们带来了dreamweaver cs6中网页制作一个带有列表下拉菜单的详细操作方法。首先需要大家打开...
用Dreamweaver制作下拉菜单
09-04
用Dreamweaver制作下拉菜单，手把手教你马上学会如何制作下拉菜单
DWCS3折叠菜单和下拉菜单的做法
05-30
DWCS3折叠菜单和下拉菜单的做法 比起那些用JS来说这个做法就优秀的多了。而且完美的CSS看起来是非常酷的！
css制作的简易的下拉导航栏菜单
01-06
下载就可以使用的css制作的简易的下拉导航栏菜单
Dreamweaver网页怎么制作一个带有列表值的下拉菜单?
09-24
Dreamweaver网页怎么制作一个带有列表值的下拉菜单？Dreamweaver设计网页的时候，需要添加一个下拉菜单，并且给下拉菜单添加列表值，下面我们就来看看详细的教程，需要的朋友可以参考下
PB用窗口dw做模拟下拉数据窗
12-04
PB用窗口datawindow做模拟下拉数据窗
Dreamweaver2018怎么设计下拉列表选项?
09-22
Dreamweaver2018怎么设计下拉列表选项？Dreamweaver中想要使用列表功能制作一个下拉列表，该怎么制作一个选择国家的列表呢？下面我们就来看看详细的教程，需要的朋友可以参考下
幻灯片挡住CSS导航下拉菜单或者飘浮广告的解决方法
12-13
网站常会用到一些下拉菜单，幻灯片，飘浮广告等。 但经常会发现。幻灯片会挡住下拉菜单或者飘浮广告等。解决办法有下 第一，可将幻灯片所在DIV 置于最底层。添加CSS如下 style="z-index:-100;position: relative;...
如何在Dreamweaver 制作弹出菜单
09-24
想不想在Dreamweaver中制作一个弹出菜单，如何在Dreamweaver 制作弹出菜单呢，下面小编给大家分享一个方法，有需要的朋友可以看看。
js实现淘宝放大镜效果
热门推荐
YZi_Angel的专栏
08-25 1万+
记得很久以前，小编就准备写个放大镜，但是种种原因导致，一直没有完成这个愿望，下面，让我们一起来实现这个常见的功能吧。 不懂的同学，可能认为这很难细实现，觉得它很博大精深的样子，其实真了解他了，你会发现原来这么简单，下面废话不多说，让我们一起来实现它吧。 首先当然是html布局和css样式： ![效果图](http://img.blog.csdn.net/20160825213
jquery中通过属性获取元素
YZi_Angel的专栏
11-23 1万+
根据属性获取元素：$("p[class]").css("color","red");给所有有class的p标签设置红色字体。根据属性值获取元素：1.$("input[name$='san'").css("background-color","red");匹配所有name以‘san’结尾的input标签设置红色背景。$选择器[attribute$=value]2.$("input[
大量数据列表渲染优化方法
YZi_Angel的专栏
05-02 9535
身为前端，我们经常遇到数据列表渲染等功能，我相信很多人都会完成这类的功能，使用的方法也大多是循环数据，创建列表元素，然后经新元素添加到列表后面，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;大量数据加载&
dw下拉菜单的代码
最新发布
05-29
DW 是 Dreamweaver 的简称，下拉菜单可以使用 HTML 和 CSS 实现。以下是一个简单的示例代码： HTML 代码： ```html 下拉菜单 链接1 链接2 链接3 ``` CSS 代码： ```css .dropdown { position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值