纯css多级菜单

最新推荐文章于 2022-05-17 11:14:38 发布
weixin_30542079
最新推荐文章于 2022-05-17 11:14:38 发布
阅读量96
点赞数
原文链接：http://www.cnblogs.com/zcttxs/archive/2012/03/30/2425092.html
版权
html页面：
View Code
  1  
  2 <!doctype html>
  3 <title>纯CSS多级菜单by 司徒正美</title>
  4 <meta charset="utf-8"/>
  5 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" />
  6 <meta name="description" content="纯CSS多级菜单 by 司徒正美" />
  7 </head>
  8 <body>
  9   <style type="text/css">
 10     * {
 11       margin:0;
 12       padding:0;
 13 }
 14     .menu {
 15       font-size:12px;
 16 }
 17     .menu li {/*水平菜单*/
 18       float:left;
 19       list-style:none;
 20       position:relative;/*把包含块移动li元素*/
 21 }
 22     .menu a {
 23       display:block;
 24       height:32px;
 25       width:100px;
 26       line-height:32px;
 27       background:#a9ea00;
 28       color:#ff8040;
 29       text-decoration:none;
 30       text-align:center;
 31       overflow:hidden;/*★★★★*/
 32 }
 33     .menu a:hover {
 34       background:#369;
 35       color:#fff;
 36 }
 37 /*新增的二级菜单部分*/
 38     .menu ul ul {
 39       visibility:hidden;/*隐藏所有子菜单（二级的三级）*/
 40       position:absolute;
 41       left:0px;
 42       top:32px;
 43 }
 44 /*指定是显示二级子菜单*/
 45     .menu ul li:hover ul.second,/*非IE6*/
 46     .menu ul a:hover ul.second{/*IE6*/
 47       visibility:visible;
 48 }
 49 
 50     .menu ul ul li {
 51       clear:both;/*垂直显示*/
 52       text-align:left;
 53 }
 54     .menu .third,.menu .fourth{
 55       top:0px;/*重设子菜单相对于包含块哪个位置出现*/
 56       left:100px;
 57 }
 58 /*指定是显示三级子菜单*/
 59     .menu ul ul li:hover ul.third,
 60     .menu ul ul a:hover ul.third{
 61       visibility:visible;
 62 }
 63 /*指定是显示三级子菜单*/
 64     .menu ul ul ul li:hover ul.fourth,
 65     .menu ul ul ul a:hover ul.fourth{
 66       visibility:visible;
 67 }
 68 /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/
 69 /*二级子菜单*/
 70     .menu ul ul a:hover{
 71       background:black;
 72       color:white;
 73 }
 74 /*三级子菜单*/
 75     .menu ul ul ul a:hover{
 76       background:#B45B3E;
 77       color:white;
 78 }
 79     .menu ul ul ul ul a:hover{
 80       background:#FFE8AA;
 81       color:#68DFFB;
 82 }
 83     .menu table {
 84       border:1px solid aqua;
 85 }
 86     .menu table td{
 87       border:1px solid aqua;
 88 }
 89 </style>
 90   <h1>这是可是四级菜单哦！</h1>
 91   <div class="menu">
 92     <ul>
 93       <li>
 94         <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
 95         <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a>
 96         <ul class="second">
 97           <li>
 98             <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
 99             <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a>
100             <ul class="third">
101               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a></li>
102               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li>
103               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li>
104               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li>
105             </ul>
106             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
107           </li>
108           <li>
109             <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
110             <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a>
111             <ul class="third">
112               <li>
113                 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
114                 <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a>
115                 <ul class="fourth">
116                   <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_31</a></li>
117                   <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_32</a></li>
118                 </ul>
119                 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
120               </li>
121               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>
122               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li>
123               <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li>
124             </ul>
125             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
126           </li>
127         </ul>
128         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
129       </li>
130       <li>
131         <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
132         <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a>
133         <ul class="second">
134           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li>
135           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li>
136         </ul>
137         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
138       </li>
139       <li>
140         <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
141         <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a>
142         <ul class="second">
143           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li>
144           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li>
145         </ul>
146         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
147       </li>
148       <li>
149         <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
150         <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a>
151         <ul class="second">
152           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li>
153           <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li>
154         </ul>
155         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
156       </li>
157     </ul>
158   </div>
159 </body>
160 </html>