纯CSS多级下拉菜单

Question

以前，我没有对多级纯CSS下拉菜单进行过很多工作，但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案，我不知道是否有更好的方法来实现这一目标，而不是做一些这样的。

Answer 1

<div class="example" align="center">&nbsp; &nbsp; <div class="menuholder">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="menu slide">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=1" class="blue">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=14" class="blue">About Us</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=4" class="blue">Mens</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=15">Coats & Jackets</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=22">Chinos</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=23">Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=25">Linen</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=26">Polo Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=16">Shirts Casual</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=27">Shirts Formal</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=28">Shorts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=18">Sportswear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=19">Tops & T-Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=20">Trousers Casual</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=29">Trousers Formal</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=30">Nightwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=17">Socks</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=21">Underwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=31">Swimwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--menu-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=5" class="blue">Ladie's</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=32">Coats & Jackets</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=33">Dresses</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=34">Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=36">Jumpsuits</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=37">Leggings & Jeggings</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=38">Linen</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=39">Lingerie & Underwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=40">Maternity Wear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=41">Nightwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<dd><a href="index.php?id=42">Shorts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=43">Skirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=44">Sportswear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=45">Suits & Tailoring</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=47">Thermals</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=48">Tops & T-Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=49">Trousers & Chinos</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=50">Socks</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><!--menu end-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--menu-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=7" class="blue">Girls</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=51">Coats & Jackets</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=52">Dresses</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=53">Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=57">Leggings</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=58">Nightwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=59">Shorts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=60">Skirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=61">Swimwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=62">Tops & T-Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=63">Trousers & Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=64">Socks</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=65">Underwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><!--menu end-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--menu-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=8" class="blue">Boys</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=66">Coats & Jackets</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=67">Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=70">Nightwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=71">Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=72">Shorts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=73">Sportswear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=74">Swimwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=76">Trousers & Jeans</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=77">Socks</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=78">Underwear</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><!--menu end-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--menu-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li><a href="index.php?id=9" class="blue">Toddlers</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=79">Newborn</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=80">0-2 Years</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><!--menu end-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--menu-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li><a href="index.php?id=10" class="blue">Accessories</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="subs">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=81">Shoes</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=82">Ties</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=83">Caps</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <dd><a href="index.php?id=84">Belts</a></dd>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dl>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li><!--menu end-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.php?id=13" class="blue">Contact Us</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; <div class="back"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="shadow"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div style="clear:both"></div></div>CSS 3编码-复制和粘贴<style>body{margin:0px;}.example {&nbsp; &nbsp; width:980px;&nbsp; &nbsp; height:40px;&nbsp; &nbsp; margin:0px auto;&nbsp;position:absolute;&nbsp;margin-bottom:60px;&nbsp;top:95px;}.menuholder {&nbsp; &nbsp; float:left;&nbsp; &nbsp; font:normal bold 11px/35px verdana, sans-serif;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; position:relative;}.menuholder .shadow {&nbsp; &nbsp; -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);&nbsp; &nbsp; -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);&nbsp; &nbsp; -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);&nbsp; &nbsp; background:#888;&nbsp; &nbsp; box-shadow:0 0 20px rgba(0, 0, 0, 1);&nbsp; &nbsp; height:10px;&nbsp; &nbsp; left:5%;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:-9px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; z-index:100;}.menuholder .back {&nbsp; &nbsp; -moz-transition-duration:.4s;&nbsp; &nbsp; -o-transition-duration:.4s;&nbsp; &nbsp; -webkit-transition-duration:.4s;&nbsp; &nbsp; background-color:rgba(0, 0, 0, 0.88);&nbsp; &nbsp; height:0;&nbsp; &nbsp; width:980px; /*100%*/}.menuholder:hover div.back {&nbsp; &nbsp; height:280px;}ul.menu {&nbsp; &nbsp; display:block;&nbsp; &nbsp; float:left;&nbsp; &nbsp; list-style:none;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0 125px;&nbsp; &nbsp; position:relative;}ul.menu li {&nbsp; &nbsp; float:left;&nbsp; &nbsp; margin:0 10px 0 0;}ul.menu li > a {&nbsp; &nbsp; -moz-border-radius:0 0 10px 10px;&nbsp; &nbsp; -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);&nbsp; &nbsp; -moz-transition:all 0.3s ease-in-out;&nbsp; &nbsp; -o-border-radius:0 0 10px 10px;&nbsp; &nbsp; -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);&nbsp; &nbsp; -o-transition:all 0.3s ease-in-out;&nbsp; &nbsp; -webkit-border-bottom-left-radius:10px;&nbsp; &nbsp; -webkit-border-bottom-right-radius:10px;&nbsp; &nbsp; -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);&nbsp; &nbsp; -webkit-transition:all 0.3s ease-in-out;&nbsp; &nbsp; border-radius:0 0 10px 10px;&nbsp; &nbsp; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);&nbsp; &nbsp; color:#eee;&nbsp; &nbsp; display:block;&nbsp; &nbsp; padding:0 10px;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; transition:all 0.3s ease-in-out;}ul.menu li a.red {&nbsp; &nbsp; background:#a00;}ul.menu li a.orange {&nbsp; &nbsp; background:#da0;}ul.menu li a.yellow {&nbsp; &nbsp; background:#aa0;}ul.menu li a.green {&nbsp; &nbsp; background:#060;}ul.menu li a.blue {&nbsp; &nbsp; background:#073263;}ul.menu li a.violet {&nbsp; &nbsp; background:#682bc2;}.menu li div.subs {&nbsp; &nbsp; left:0;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:35px;&nbsp; &nbsp; width:0;}.menu li div.subs dl {&nbsp; &nbsp; -moz-transition-duration:.2s;&nbsp; &nbsp; -o-transition-duration:.2s;&nbsp; &nbsp; -webkit-transition-duration:.2s;&nbsp; &nbsp; float:left;&nbsp; &nbsp; margin:0 130px 0 0;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; padding:40px 0 5% 2%;&nbsp; &nbsp; width:0;}.menu dt {&nbsp; &nbsp; color:#fc0;&nbsp; &nbsp; font-family:arial, sans-serif;&nbsp; &nbsp; font-size:12px;&nbsp; &nbsp; font-weight:700;&nbsp; &nbsp; height:20px;&nbsp; &nbsp; line-height:20px;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0 0 0 10px;&nbsp; &nbsp; white-space:nowrap;}.menu dd {&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; text-align:left;}.menu dd a {&nbsp; &nbsp; background:transparent;&nbsp; &nbsp; color:#fff;&nbsp; &nbsp; font-size:12px;&nbsp; &nbsp; height:20px;&nbsp; &nbsp; line-height:20px;&nbsp; &nbsp; padding:0 0 0 10px;&nbsp; &nbsp; text-align:left;&nbsp; &nbsp; white-space:nowrap;&nbsp; &nbsp; width:80px;}.menu dd a:hover {&nbsp; &nbsp; color:#fc0;}.menu li:hover div.subs dl {&nbsp; &nbsp; -moz-transition-delay:0.2s;&nbsp; &nbsp; -o-transition-delay:0.2s;&nbsp; &nbsp; -webkit-transition-delay:0.2s;&nbsp; &nbsp; margin-right:2%;&nbsp; &nbsp; width:21%;}ul.menu li:hover > a,ul.menu li > a:hover {&nbsp; &nbsp; background:#aaa;&nbsp; &nbsp; color:#fff;&nbsp; &nbsp; padding:10px 10px 0;}ul.menu li a.red:hover,ul.menu li:hover a.red {&nbsp; &nbsp; background:#c00;}ul.menu li a.orange:hover,ul.menu li:hover a.orange {&nbsp; &nbsp; background:#fc0;}ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {&nbsp; &nbsp; background:#cc0;}ul.menu li a.green:hover,ul.menu li:hover a.green {&nbsp; &nbsp; background:#080;}ul.menu li a.blue:hover,ul.menu li:hover a.blue {&nbsp; &nbsp; 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 {&nbsp; &nbsp; width:100%;}

Answer 2

对于响应单击事件而不是仅悬停并以与选择控件类似的方式起作用的菜单...纯CSS选择菜单的HTML<ul tabindex='0'>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input id='item1' type='radio' name='item' checked='true' />&nbsp; &nbsp; &nbsp; &nbsp; <label for='item1'>Item 1</label>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input id='item2' type='radio' name='item' />&nbsp; &nbsp; &nbsp; &nbsp; <label for='item2'>Item 2</label>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <input id='item3' type='radio' name='item' />&nbsp; &nbsp; &nbsp; &nbsp; <label for='item3'>Item 3</label>&nbsp; &nbsp; </li></ul>的CSSul, li {&nbsp; &nbsp; list-style:none;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;}li input {&nbsp; &nbsp; display:none;}ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {&nbsp; &nbsp; display:none;}input:checked+label {&nbsp; &nbsp; color:red;}