[原创]DW4：导航二级菜单的制作方…

最新推荐文章于 2021-12-19 10:34:18 发布

原创最新推荐文章于 2021-12-19 10:34:18 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

网页制作专栏收录该内容

18 篇文章

订阅专栏

DW4取消了“显示弹出菜单”，使很多朋友在制作二级菜单的时候不知道什么简单办法了，我研究了一段了时间，以下代码可行，在IE8/FIREFOX/IE6的浏览器下测试可行，HTML代码和CSS代码分别保存。

该代码只使用了onmouseover、onmouseout两个js代码，简单易用，不用手工编写，直接在DW里面，选中主导航的某个菜单（比如“新闻”），按F9(标签检查器)，再按“行为”，再点击“+”，选择“显示-隐藏元素”，在弹出的窗口里选择要显示或隐藏图层的ID（比如“#sub_menu_01”），再点击“显示”或“隐藏”，然后确定就可以了。

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>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>

CSS代码：
@charset "utf-8";
body {
padding:0;
margin:0;
font-size:12px;
line-height:20px;
text-align:center;
font-family: Arial, Helvetica, sans-serif, Verdana, "宋体", "微软雅黑";
text-decoration: none;
}
ul,li {
list-style-type: none;
padding:0;
margin:0;
}
a {
font-size:12px;
color:#069;
font-family: Arial, Helvetica, sans-serif, Verdana, "宋体", "微软雅黑";
line-height: 20px;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#F00;
}
#wrapper {
width:960px;
height:1000px;
margin:0 auto;
overflow:auto;
background-color:#9FF;
}

#menu {
width:725px;
height:35px;
background-color:#CCC;
float:right;
}
#menu li {
width:130px;
height:35px;
float:left;
}
#menu li a {
width:130px;
height:35px;
display:block;
background-color:#C9F;
line-height:30px;
font-weight:bold;
}
#menu li a:hover {
background-color:#FF9;
}

#sub_menu {
width:725px;
height:auto;
float:right;
position:relative;
}

#sub_menu_01 {
width:115px;
height:auto;
padding-left:5px;
position:absolute;
top:0px;
left:0px;
visibility:hidden;
}
#sub_menu_01 ul {
display:block;
}
#sub_menu_01 li {
border-bottom:solid 1px #CCC;
height:23px;
}
#sub_menu_01 li a {
width:115px;
height:23px;
border-bottom:solid 1px #DDD;
display:block;
background:#FFF;
text-align:left;
line-height:23px;
color:#666;
padding-left:5px;
}
#sub_menu_01 li a:hover {
background-color:#EEE;
color:#069;
}

#sub_menu_02 {
width:115px;
height:auto;
padding-left:5px;
position:absolute;
top:0px;
left:130px;
visibility:hidden;
}
#sub_menu_02 ul {
display:block;
}
#sub_menu_02 li {
border-bottom:solid 1px #CCC;
height:23px;
}
#sub_menu_02 li a {
width:115px;
height:23px;
border-bottom:solid 1px #DDD;
display:block;
background:#FFF;
text-align:left;
line-height:23px;
color:#666;
padding-left:5px;
}
#sub_menu_02 li a:hover {
background-color:#EEE;
color:#069;
}

#sub_menu_03 {
width:115px;
height:auto;
padding-left:5px;
position:absolute;
top:0px;
left:260px;
visibility:hidden;
}
#sub_menu_03 li {
border-bottom:solid 1px #CCC;
height:23px;
}
#sub_menu_03 li a {
width:115px;
height:23px;
border-bottom:solid 1px #DDD;
display:block;
background:#FFF;
text-align:left;
line-height:23px;
color:#666;
padding-left:5px;
}
#sub_menu_03 li a:hover {
background-color:#EEE;
color:#069;
}

#sub_menu_04 {
width:115px;
height:auto;
padding-left:5px;
position:absolute;
top:0px;
left:390px;
visibility:hidden;
}
#sub_menu_04 li {
border-bottom:solid 1px #CCC;
height:23px;
}
#sub_menu_04 li a {
width:115px;
height:23px;
border-bottom:solid 1px #DDD;
display:block;
background:#FFF;
text-align:left;
line-height:23px;
color:#666;
padding-left:5px;
}
#sub_menu_04 li a:hover {
background-color:#EEE;
color:#069;
}

#sub_menu_05 {
width:115px;
height:auto;
padding-left:5px;
position:absolute;
top:0px;
left:520px;
visibility:hidden;
}
#sub_menu_05 li {
border-bottom:solid 1px #CCC;
height:23px;
}
#sub_menu_05 li a {
width:115px;
height:23px;
border-bottom:solid 1px #DDD;
display:block;
background:#FFF;
text-align:left;
line-height:23px;
color:#666;
padding-left:5px;
}
#sub_menu_05 li a:hover {
background-color:#EEE;
color:#069;
}