纯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>

本文永久地址:https://sjolzy.cn/Pure-CSS-drop-down-menu-to-streamline-the-code.html

--EOF--

标签: href, div, style, class

随机文章

已有 3 条评论

  1. 莹莹莹莹

    不好意思啊,刚才没有能好,可以啦,very good 博主太厉害啦,number one!!!

  2. 莹莹莹莹

    不意思,我试的怎么不成功啊!!

添加新评论