纯CSS下拉菜单精简代码

 

<style type="text/css">

ul, li{list-style:none; padding:0; margin:0; line-height:160%}

a{font:normal 14px "宋体"; text-decoration:none}

li.mainnav{margin:10px; border:1px solid #039; float:left}

.mainnav ul{display:none}

.mainnav:hover ul, .mainnav:hover li{display:block}

.mainnav:hover{z-index:2; background:#fff}

</style>

<div style="position:relative; width:600px; height:40px">

<div style="position:absolute">

<ul>

<li class="mainnav">

<!--[if IE 6]><a class="mainnav" href="#"><table><tr><td><![endif]-->

<a href="#">导航01</a>

<ul class="catnavbox">

<li><a href="0101">导航01-05</a></li>

<li><a href="0102">导航01-04</a></li>

<li><a href="0103">导航01-03</a></li>

<li><a href="0104">导航01-02</a></li>

<li><a href="0105">导航01-01</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="mainnav">

<!--[if IE 6]><a class="mainnav" href="#"><table><tr><td><![endif]-->

<a href="#">导航02</a>

<ul class="catnavbox">

<li><a href="#">导航02-05</a></li>

<li><a href="#">导航02-04</a></li>

<li><a href="#">导航02-03</a></li>

<li><a href="#">导航02-02</a></li>

<li><a href="#">导航02-01</a></li>

</ul>

<!--[if IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div></div>

<div style="clear:both; width:600px; height:100px; background:#390"></div>

标签: href, div, style, class