纯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;}
10 .menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;}
11 .menu ul ul{}
12 .menu ul ul li {clear:both;text-align:left;font-size:12px;}
13 .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
14 .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;}
19 </style>
20 


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>
10                 <li><a href="#">submenu4</a></li>
11             </ul>
12             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
13         </li>
14         <li><a href="">menu2
15             <!--[if IE 7]><!--></a><!--<![endif]-->
16             <!--[if lte IE 6]><table><tr><td><![endif]-->
17             <ul>
18                 <li><a href="">submenu1</a></li>
19                 <li><a href="">submenu2</a></li>
20             </ul>
21             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
22         </li>
23         <li><a href="">menu3
24             <!--[if IE 7]><!--></a><!--<![endif]-->
25             <!--[if lte IE 6]><table><tr><td><![endif]-->
26             <ul>
27                 <li><a href="">submenu1</a></li>
28                 <li><a href="">submenu2</a></li>
29             </ul>
30             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
31         </li>
32         <li><a href="">menu4</a></li>
33         <li><a href="">menu5</a></li>
34     </ul>
35 </div>
36 




posted @ 2009-08-12 16:51  小郑  阅读(568)  评论(0)  编辑  收藏  举报