CSS+div下拉菜单jsWord文件下载.docx
《CSS+div下拉菜单jsWord文件下载.docx》由会员分享，可在线阅读，更多相关《CSS+div下拉菜单jsWord文件下载.docx（8页珍藏版）》请在冰豆网上搜索。
/ul>
……
/div>
在这样的结构中，上层的DIV等标签不能用overflow:
hidden;
，否则下拉菜单会出不来。
我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生下拉菜单跑位。
而这样嵌套后，一会通过定位，就不会偏移。
在实际应用时，nav可以加入LOGO等内容，而nav_top才是用于控制菜单。
2、样式继承：
由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。
A、第一层样式定义：
body{
margin:
0px;
padding:
font-size:
12px;
}
#nav{
……/*略*/
width:
800px;
0auto;
#navul{
#navulli{
float:
left;
#navullia{
#navullia:
hover{
B、父层LI的相对定位：
接着最关键就是定义：
#navulli{position:
relative;
}把第一层的LI定义成相对定位后，下拉菜单的绝对定位就不会偏移，而以其上层的LI做为参照，此外，需要对下拉菜单的列表做2项工作：
第一项：
设置下拉列表的UL不显示：
#navulliul设为display:
none。
以及绝对定位position:
absolute;
left:
3px;
top:
24px;
。
第二项：
对下拉列表的LI浮动进行清除#navulliulli设为float:
none；
如果不清除也可以，但下拉列表的UL要设置宽度width:
99px;
，当不设置此宽度也不清除浮动继承时，下拉菜单就变成横向出向，如果你需要这种下拉效果，就不清除吧，如下图：
#navulliul{display:
none;
0;
position:
background-color:
#FC9;
border-bottom:
1pxsolid#FC0;
#navulliulli{width:
border:
0px1px;
C、光标移上去的状态定义：
定义完上面后，接着对下拉菜单在光标移到上层LI时的状态控制：
#navulliullia,#navulliullia:
hover{background:
#3CF;
98px;
margin-left:
text-align:
left;
border-top:
padding-left:
5px;
color:
#000}
#navulli:
hoverul,#navli.overul{display:
block;
这两行中，第一行#navulliullia,#navulliullia:
hover{…}作用是更改整个菜单第一层的LI对下拉部分影响，避免由于继承影响样式。
第二行是用于当光标移上去后，下拉菜单出现。
大家可能注意到其中的.over类，我们并没有在结构代码中设置，这是为了控制等下JS生成的类。
在#navulli:
hoverul中，FF下已经能够生效，不需要JS，但IE6下不行，需要通过后半句#navli.overul配合JS来生效。
D、javascript代码：
scripttype=”text/javascript”>
varshowNavList=function（）{
if（document.all&
&
document.getElementById）{
varnavRoot=document.getElementById（“nav_top”）;
//注意不能用nav。
for（i=0;
i<
navRoot.childNodes.length;
i++）{
varnode=navRoot.childNodes[i];
if（node.nodeName==’LI‘）{
node.onmouseover=function（）{this.className+=’over’;
}//注意over前面有一个空格。
node.onmouseout=function（）{this.className=this.className.replace（‘over’,”）;
window.onload=showNavList;
/script>
这样，我们整个下拉菜单就完成了，效果参下面图例，完整代码附到后面，实际应用中，对下拉样式再做美化即可。
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
title>
CSS测试<
/title>
styletype="
text/css"
–
background-color:
#666;
thinsolid#000;
height:
100px;
1pxsolid#666;
#900;
margin-right:
16px;
margin-top:
74px;
332px;
list-style-type:
none;
right;
letter-spacing:
1px;
center;
display:
block;
22px;
80px;
border-left:
1pxsolid#900;
#F96;
text-decoration:
padding-top:
4px;
background:
url（/board.gif）no-repeat-12px-108px;
overflow:
hidden;
2px;
#F60;
url（/board.gif）no-repeat-15px-118px;
6px;
20px;
#navulli{position:
#navulliul{display:
position:
left:
top:
#navulliulli{width:
.content{margin:
1pxsolid#33F;
.clear{font:
0px/0px宋体;
clear:
both;
block}
–>
/style>
scripttype="
text/javascript"
varnavRoot=document.getElementById（"
nav_top"
）;
if（node.nodeName=='
LI'
）{
node.onmouseover=function（）{this.className+='
over'
;
node.onmouseout=function（）{this.className=this.className.replace（'
'
'
/head>
body>
divid="
wrap"
nav"
ulid="
liid="
nav_index"
ahref="
/"
#"
升级会员 