网站css二级导航代码

html-css010

网站css二级导航代码,第1张

这个一般是结合JS来实现，思路是让二级菜单放到一个div里，在menu菜单按钮的onmouseover事件里写一段程序，大致是document.getElementById('subMenu').style.display

=

'block'

然后在onmouseout里写上document.getElementById('subMenu').style.display

=

'none'

二级菜单的具体实现一般是

<ul>

<li>111</li>

<li>111</li>

<li>111</li>

</ul>

设置li标签的float为left或者right

大致的内容就是这样

<style>    

* {margin:0px padding:0px}    

li {list-style:none width:100px height:30px font-size:14px text-align:left line-height:30px border:1px solid #000 position:relative}    

.box>li {float:left position:relative}    

.son {position:absolute top:30px left:-1px}    

.grason {position:absolute top:-1px left:100px}    

.son,.grason {display:none}    

.active {display:block background:#FF0}    

</style>    

<script>    

window.onload=function(){    

var aLi = document.getElementsByTagName('li')    

    

for(var i=0i<aLi.lengthi++)    

{    

aLi[i].onmouseover = function(){    

this.className = 'active'    

var oSon = this.getElementsByTagName('ul')[0]    

if(oSon)    

{    

oSon.style.display='block'    

}    

}    

aLi[i].onmouseout = function(){    

this.className = ''    

var oSon = this.getElementsByTagName('ul')[0]    

if(oSon)    

{    

oSon.style.display='none'    

}    

}    

}    

}    

</script>    

</head>    

<body>    

<ul class="box">    

<li>首页</li>    

<li>公司简介    

<ul class="son">    

<li>大事件</li>    

<li>领导致辞    

<ul class="grason">    

<li>2013年    

<ul class="grason">    

<li>10月份</li>    

<li>9月份</li>    

<li>8月份</li>    

</ul>    

</li>    

<li>2014年    

<ul class="grason">    

<li>10月份</li>    

<li>9月份</li>    

<li>8月份</li>    

</ul>    

</li>    

</ul>    

</li>    

<li>企业文化</li>    

</ul>    

</li>    

<li>联系我们</li>    

<li>产品显示</li>    

</ul>    

</body>