纯CSS多级下拉菜单
我之前没有做过多层次，纯粹的CSS下拉菜单，但我现在正在寻找最干净的方法。 当我在网上search时，我发现了很多4-5岁的解决scheme，我不确定是否有更好的方法来实现这个目标 。
HTML
<ul class="top-level-menu"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Offices</a> <ul class="second-level-menu"> <li><a href="#">Chicago</a></li> <li><a href="#">Los Angeles</a></li> <li> <a href="#">New York</a> <ul class="third-level-menu"> <li><a href="#">Information</a></li> <li><a href="#">Book a Meeting</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Jobs</a></li> </ul> </li> <li><a href="#">Seattle</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> CSS
/* Menu Styles */ .third-level-menu { position: absolute; top: 0; right: -150px; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .third-level-menu > li { height: 30px; background: #999999; } .third-level-menu > li:hover { background: #CCCCCC; } .second-level-menu { position: absolute; top: 30px; left: 0; width: 150px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu > li { position: relative; height: 30px; background: #999999; } .second-level-menu > li:hover { background: #CCCCCC; } .top-level-menu { list-style: none; padding: 0; margin: 0; } .top-level-menu > li { position: relative; float: left; height: 30px; width: 150px; background: #999999; } .top-level-menu > li:hover { background: #CCCCCC; } .top-level-menu li:hover > ul { /* On hover, display the next level's menu */ display: inline; } /* Menu Link Styles */ .top-level-menu a /* Apply to all links inside the multi-level menu */ { font: bold 14px Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; padding: 0 0 0 10px; /* Make the link cover the entire list item-container */ display: block; line-height: 30px; } .top-level-menu a:hover { color: #000000; }
我也制作了一个可以在这里玩的现场演示
<div class="example" align="center"> <div class="menuholder"> <ul class="menu slide"> <li><a href="index.php?id=1" class="blue">Home</a></li> <li><a href="index.php?id=14" class="blue">About Us</a></li> <li><a href="index.php?id=4" class="blue">Mens</a> <div class="subs"> <dl> <dd><a href="index.php?id=15">Coats & Jackets</a></dd> <dd><a href="index.php?id=22">Chinos</a></dd> <dd><a href="index.php?id=23">Jeans</a></dd> <dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd> <dd><a href="index.php?id=25">Linen</a></dd> </dl> <dl> <dd><a href="index.php?id=26">Polo Shirts</a></dd> <dd><a href="index.php?id=16">Shirts Casual</a></dd> <dd><a href="index.php?id=27">Shirts Formal</a></dd> <dd><a href="index.php?id=28">Shorts</a></dd> <dd><a href="index.php?id=18">Sportswear</a></dd> </dl> <dl> <dd><a href="index.php?id=19">Tops & T-Shirts</a></dd> <dd><a href="index.php?id=20">Trousers Casual</a></dd> <dd><a href="index.php?id=29">Trousers Formal</a></dd> <dd><a href="index.php?id=30">Nightwear</a></dd> <dd><a href="index.php?id=17">Socks</a></dd> </dl> <dl> <dd><a href="index.php?id=21">Underwear</a></dd> <dd><a href="index.php?id=31">Swimwear</a></dd> </dl> </div> </li> <!--menu--> <li><a href="index.php?id=5" class="blue">Ladie's</a> <div class="subs"> <dl> <dd><a href="index.php?id=32">Coats & Jackets</a></dd> <dd><a href="index.php?id=33">Dresses</a></dd> <dd><a href="index.php?id=34">Jeans</a></dd> <dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd> <dd><a href="index.php?id=36">Jumpsuits</a></dd> </dl> <dl> <dd><a href="index.php?id=37">Leggings & Jeggings</a></dd> <dd><a href="index.php?id=38">Linen</a></dd> <dd><a href="index.php?id=39">Lingerie & Underwear</a></dd> <dd><a href="index.php?id=40">Maternity Wear</a></dd> <dd><a href="index.php?id=41">Nightwear</a></dd> </dl> <dl> <dd><a href="index.php?id=42">Shorts</a></dd> <dd><a href="index.php?id=43">Skirts</a></dd> <dd><a href="index.php?id=44">Sportswear</a></dd> <dd><a href="index.php?id=45">Suits & Tailoring</a></dd> <dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd> </dl> <dl> <dd><a href="index.php?id=47">Thermals</a></dd> <dd><a href="index.php?id=48">Tops & T-Shirts</a></dd> <dd><a href="index.php?id=49">Trousers & Chinos</a></dd> <dd><a href="index.php?id=50">Socks</a></dd> </dl> </div> </li><!--menu end--> <!--menu--> <li><a href="index.php?id=7" class="blue">Girls</a> <div class="subs"> <dl> <dd><a href="index.php?id=51">Coats & Jackets</a></dd> <dd><a href="index.php?id=52">Dresses</a></dd> <dd><a href="index.php?id=53">Jeans</a></dd> <dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd> <dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd> </dl> <dl> <dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd> <dd><a href="index.php?id=57">Leggings</a></dd> <dd><a href="index.php?id=58">Nightwear</a></dd> <dd><a href="index.php?id=59">Shorts</a></dd> <dd><a href="index.php?id=60">Skirts</a></dd> </dl> <dl> <dd><a href="index.php?id=61">Swimwear</a></dd> <dd><a href="index.php?id=62">Tops & T-Shirts</a></dd> <dd><a href="index.php?id=63">Trousers & Jeans</a></dd> <dd><a href="index.php?id=64">Socks</a></dd> <dd><a href="index.php?id=65">Underwear</a></dd> </dl> <dl> </dl> </div> </li><!--menu end--> <!--menu--> <li><a href="index.php?id=8" class="blue">Boys</a> <div class="subs"> <dl> <dd><a href="index.php?id=66">Coats & Jackets</a></dd> <dd><a href="index.php?id=67">Jeans</a></dd> <dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd> <dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd> <dd><a href="index.php?id=70">Nightwear</a></dd> </dl> <dl> <dd><a href="index.php?id=71">Shirts</a></dd> <dd><a href="index.php?id=72">Shorts</a></dd> <dd><a href="index.php?id=73">Sportswear</a></dd> <dd><a href="index.php?id=74">Swimwear</a></dd> <dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd> </dl> <dl> <dd><a href="index.php?id=76">Trousers & Jeans</a></dd> <dd><a href="index.php?id=77">Socks</a></dd> <dd><a href="index.php?id=78">Underwear</a></dd> </dl> <dl> </dl> </div> </li><!--menu end--> <!--menu--> <li><a href="index.php?id=9" class="blue">Toddlers</a> <div class="subs"> <dl> <dd><a href="index.php?id=79">Newborn</a></dd> <dd><a href="index.php?id=80">0-2 Years</a></dd> </dl> </div> </li><!--menu end--> <!--menu--> <li><a href="index.php?id=10" class="blue">Accessories</a> <div class="subs"> <dl> <dd><a href="index.php?id=81">Shoes</a></dd> <dd><a href="index.php?id=82">Ties</a></dd> <dd><a href="index.php?id=83">Caps</a></dd> <dd><a href="index.php?id=84">Belts</a></dd> </dl> </div> </li><!--menu end--> <li><a href="index.php?id=13" class="blue">Contact Us</a></li> </ul> <div class="back"></div> <div class="shadow"></div> </div> <div style="clear:both"></div> </div>
CSS 3编码 – 复制和粘贴
<style> body{margin:0px;} .example { width:980px; height:40px; margin:0px auto; position:absolute; margin-bottom:60px; top:95px; } .menuholder { float:left; font:normal bold 11px/35px verdana, sans-serif; overflow:hidden; position:relative; } .menuholder .shadow { -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1); -o-box-shadow:0 0 20px rgba(0, 0, 0, 1); -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1); background:#888; box-shadow:0 0 20px rgba(0, 0, 0, 1); height:10px; left:5%; position:absolute; top:-9px; width:100%; z-index:100; } .menuholder .back { -moz-transition-duration:.4s; -o-transition-duration:.4s; -webkit-transition-duration:.4s; background-color:rgba(0, 0, 0, 0.88); height:0; width:980px; /*100%*/ } .menuholder:hover div.back { height:280px; } ul.menu { display:block; float:left; list-style:none; margin:0; padding:0 125px; position:relative; } ul.menu li { float:left; margin:0 10px 0 0; } ul.menu li > a { -moz-border-radius:0 0 10px 10px; -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9); -moz-transition:all 0.3s ease-in-out; -o-border-radius:0 0 10px 10px; -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9); -o-transition:all 0.3s ease-in-out; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9); -webkit-transition:all 0.3s ease-in-out; border-radius:0 0 10px 10px; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9); color:#eee; display:block; padding:0 10px; text-decoration:none; transition:all 0.3s ease-in-out; } ul.menu li a.red { background:#a00; } ul.menu li a.orange { background:#da0; } ul.menu li a.yellow { background:#aa0; } ul.menu li a.green { background:#060; } ul.menu li a.blue { background:#073263; } ul.menu li a.violet { background:#682bc2; } .menu li div.subs { left:0; overflow:hidden; position:absolute; top:35px; width:0; } .menu li div.subs dl { -moz-transition-duration:.2s; -o-transition-duration:.2s; -webkit-transition-duration:.2s; float:left; margin:0 130px 0 0; overflow:hidden; padding:40px 0 5% 2%; width:0; } .menu dt { color:#fc0; font-family:arial, sans-serif; font-size:12px; font-weight:700; height:20px; line-height:20px; margin:0; padding:0 0 0 10px; white-space:nowrap; } .menu dd { margin:0; padding:0; text-align:left; } .menu dd a { background:transparent; color:#fff; font-size:12px; height:20px; line-height:20px; padding:0 0 0 10px; text-align:left; white-space:nowrap; width:80px; } .menu dd a:hover { color:#fc0; } .menu li:hover div.subs dl { -moz-transition-delay:0.2s; -o-transition-delay:0.2s; -webkit-transition-delay:0.2s; margin-right:2%; width:21%; } ul.menu li:hover > a,ul.menu li > a:hover { background:#aaa; color:#fff; padding:10px 10px 0; } ul.menu li a.red:hover,ul.menu li:hover a.red { background:#c00; } ul.menu li a.orange:hover,ul.menu li:hover a.orange { background:#fc0; } ul.menu li a.yellow:hover,ul.menu li:hover a.yellow { background:#cc0; } ul.menu li a.green:hover,ul.menu li:hover a.green { background:#080; } ul.menu li a.blue:hover,ul.menu li:hover a.blue { background:#00c; } ul.menu li a.violet:hover,ul.menu li:hover a.violet { background:#8a2be2; } .menu li:hover div.subs,.menu li a:hover div.subs { width:100%; }
这里有几个很好的网站检查出来，
http://www.tripwiremagazine.com/2011/10/css-menu-and-navigation.html （很多例子）
http://webdesignerwall.com/tutorials/css3-dropdown-menu（1个示例更多的教程）;
希望这是有用的信息！
对于点击事件响应的菜单，而不是只是hover，并采取类似的方式select控制…
纯CSSselect菜单
HTML
<ul tabindex='0'> <li> <input id='item1' type='radio' name='item' checked='true' /> <label for='item1'>Item 1</label> </li> <li> <input id='item2' type='radio' name='item' /> <label for='item2'>Item 2</label> </li> <li> <input id='item3' type='radio' name='item' /> <label for='item3'>Item 3</label> </li> </ul>
CSS
ul, li { list-style:none; margin:0; padding:0; } li input { display:none; } ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label { display:none; } input:checked+label { color:red; }
