纯CSS制作下拉菜单，有点意思

纯CSS制作下拉菜单，有点意思

其中用到了下面的

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

2. <!--[if IE]> 所有的IE可识别 <![endif]-->

3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

7. <!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

10. <!--[if lte IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

1 <style type="text/css">

2 *{margin:0;padding:0;}

3 .menu{font-size:12px;position:relative;z-index:100;}

4 .menu ul{list-style:none;}

5 .menu li {float:left;position:relative;}

6 .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}

7 .menu table {position:absolute; top:0; left:0;}

8 .menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}

9 .menu a{display:block;border:1px solid #000;background:#8192A6;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}

.menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;}

.menu ul ul{}

.menu ul ul li {clear:both;text-align:left;font-size:12px;}

.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}

.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;}

</style>

HTML：

1 <div class="menu">

2 <ul>

3 <li><a href="">menu1

4 <!--[if IE 7]><!--></a><!--<![endif]-->

5 <!--[if lte IE 6]><table><tr><td><![endif]-->

6 <ul>

7 <li><a href="#">submenu1</a></li>

8 <li><a href="#">submenu2</a></li>

9 <li><a href="#">submenu3</a></li>

<li><a href="#">submenu4</a></li>

</ul>

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

</li>

<li><a href="">menu2

<!--[if IE 7]><!--></a><!--<![endif]-->

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

<ul>

<li><a href="">submenu1</a></li>

<li><a href="">submenu2</a></li>

</ul>

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

</li>

<li><a href="">menu3

<!--[if IE 7]><!--></a><!--<![endif]-->

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

<ul>

<li><a href="">submenu1</a></li>

<li><a href="">submenu2</a></li>

</ul>

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

</li>

<li><a href="">menu4</a></li>

<li><a href="">menu5</a></li>

</ul>

</div>