【急】关于css制作的竖向二级菜单

html-css07

【急】关于css制作的竖向二级菜单,第1张

ie6是不支持li:hover 这个css样式的，遨游也是基于ie6的内核，我在网上查了一下，根据你的代码改起来比较麻烦，建议放弃吧，改用javascript的，网上有很多现成的代码，如果硬要修改的话，建议参考

http://www.cnscn.org/read.php?tid=14335

CCS如何设置列表的横排或者竖排

请看案例：

让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。

下面是简单的代码实现,仅供参考：

<style>

* {margin:0pxpadding:0px}

li {list-style:nonewidth:100pxheight:30pxfont-size:14pxtext-align:leftline-height:30pxborder:1px solid #000position:relative}

.box>li {float:leftposition:relative}

.son {position:absolutetop:30pxleft:-1pxwidth:306px}

.son>li {float:left} /*浮动后，二级菜单就在一行了*/

.grason {position:absolutetop:-1pxleft:100px}

.son,.grason {display:none}

.active {display:blockbackground:#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>领导致辞</li>

<li>企业文化</li>

</ul>

</li>

<li>联系我们</li>

<li>产品显示</li>

</ul>

</body>

这是我拿网络上的一个纯CSS菜单样式修改的竖排样式，你可以拿去参考和再次修改。

希望能帮到你。

下面是效果图，左侧是未展开的，右侧是展开的效果。