古詩詞大全網 - 四字成語 - div+css制作橫向下拉式菜單方面的問題

div+css制作橫向下拉式菜單方面的問題

按照妳的結構,考慮到ie6不支持li:hover偽類寫法,所以用jQuery解決了。

<style?type="text/css">

*{margin:0;padding:0;font-size:14px;line-height:35px;}

a{color:#0099cc;text-decoration:none;}

ul,li{list-style:none;}

#menu{width:800px;height:35px;background:#333333;}

#menu?ul?li{float:left;width:100px;margin-left:1px;position:relative;}

#menu?ul?li?ul?li{margin-left:0;}

#menu?ul?li?a{width:100%;height:100%;text-align:center;display:block;background:#666666;}

/*二級欄目*/

#menu?ul?li?ul{display:none;position:absolute;left:0;top:35px;}

#menu?ul?li?ul?a{background:#333333;}

</style>

<div?id="menu">

<ul>

<li><a?href="#">壹級欄目1</a></li>

<li><a?href="#">壹級欄目1</a></li>

<li><a?href="#">壹級欄目3</a>

<ul>

<li><a?href="#">二級欄目1</a></li>

<li><a?href="#">二級欄目2</a></li>

<li><a?href="#">二級欄目3</a></li>

</ul>?

</li>

<li><a?href="#">壹級欄目4</a>

<ul>

<li><a?href="#">二級欄目4</a></li>

<li><a?href="#">二級欄目5</a></li>

<li><a?href="#">二級欄目6</a></li>

</ul>?

</li>

<li><a?href="#">壹級欄目5</a></li>

</ul>

</div>

<script?type="text/javascript"?src="js/jq.js"></script><!--這裏要引入jQuery庫-->

<script?type="text/javascript">

$(function(){

$("#menu?ul?>?li").hover(function(){

$(this).find("ul").stop(true,true).show(100);

},function(){

$(this).find("ul").stop(true,true).hide(100);

})

})

</script>