注意：菜单通常有转换（这使得导航变得更容易），但它们似乎在jsfiddle中喋喋不休，所以我把它们拿出来了。现在导航菜单有点困难。
在这个小提琴中（在我的网站上实现），您可以看到子子菜单没有合适的宽度。我现在已经尝试和搜索了很长时间，无法弄清楚如何让子子菜单扩展以适应其内容。
我会把我尝试过的所有东西放在这里，但是我已经尝试了很多东西了，现在很难。
HTML
<div id="nav">
<ul id="nav-menu" class="menu"><li id="menu-item-20816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20816 first-child"><a>Casters</a>
<ul class="sub-menu">
<li id="menu-item-16927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16927 first-child"><a href="http://www.casterconcepts.com/all-casters/">All Casters</a></li>
<li id="menu-item-22502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22502 has-children"><a href="http://www.casterconcepts.com/casters-by-type/">Casters By Type</a>
<ul class="sub-menu">
<li id="menu-item-22608" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22608 first-child"><a href="http://www.casterconcepts.com/casters/castershox/">CasterShoX</a></li>
<li id="menu-item-22609" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22609"><a href="http://www.casterconcepts.com/casters/dual-wheel/">Dual Wheel</a></li>
<li id="menu-item-22610" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22610"><a href="http://www.casterconcepts.com/casters/flanged-wheel/">Flanged Wheel</a></li>
<li id="menu-item-22611" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22611"><a href="http://www.casterconcepts.com/casters/pneumatic-wheel/">Pneumatic Wheel</a></li>
<li id="menu-item-22612" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22612"><a href="http://www.casterconcepts.com/casters/shock-absorbing/">Shock Absorbing</a></li>
<li id="menu-item-22613" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22613"><a href="http://www.casterconcepts.com/casters/twergo-casters/">TWERGO</a></li>
<li id="menu-item-22614" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22614"><a href="http://www.casterconcepts.com/casters/v-groove-casters/">V-Groove</a></li>
<li id="menu-item-22615" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22615 last-child"><a href="http://www.casterconcepts.com/casters/vertical-mounted-casters/">Vertical Mounted</a></li>
</ul>
</li>
<li id="menu-item-22501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22501 has-children"><a href="http://www.casterconcepts.com/casters-by-series/">Casters By Series</a>
<ul class="sub-menu">
<li id="menu-item-22592" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22592 first-child"><a href="http://www.casterconcepts.com/casters/30-series/">30 Series – Medium Duty</a></li>
<li id="menu-item-22593" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22593"><a href="http://www.casterconcepts.com/casters/50-series/">50 Series – Medium Duty</a></li>
<li id="menu-item-22594" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22594"><a href="http://www.casterconcepts.com/casters/51-series/">51 Series – Kingpinless Style</a></li>
<li id="menu-item-22595" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22595"><a href="http://www.casterconcepts.com/casters/55-series/">55 Series – Maintenance Free</a></li>
<li id="menu-item-22596" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22596"><a href="http://www.casterconcepts.com/casters/57-series/">57 Series – Maintenance Free</a></li>
<li id="menu-item-22597" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22597"><a href="http://www.casterconcepts.com/casters/60-series/">60 Series – Heavy Duty</a></li>
<li id="menu-item-22598" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22598"><a href="http://www.casterconcepts.com/casters/61-series/">61 Series – Kingpinless Style</a></li>
<li id="menu-item-22599" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22599"><a href="http://www.casterconcepts.com/casters/65-series-heavy-duty-casters/">65 Series – Heavy Duty</a></li>
<li id="menu-item-22600" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22600"><a href="http://www.casterconcepts.com/casters/70-series/">70 Series – Heavy Duty</a></li>
<li id="menu-item-22601" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22601"><a href="http://www.casterconcepts.com/casters/80-series/">80 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22602" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22602"><a href="http://www.casterconcepts.com/casters/81-series/">81 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22603" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22603"><a href="http://www.casterconcepts.com/casters/85-series/">85 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22604" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22604"><a href="http://www.casterconcepts.com/casters/90-series/">90 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22605" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22605"><a href="http://www.casterconcepts.com/casters/91-series-extra-heavy-duty-casters/">91 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22606" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22606"><a href="http://www.casterconcepts.com/casters/95-series/">95 Series – Extra Heavy Duty</a></li>
<li id="menu-item-22607" class="menu-item menu-item-type-post_type menu-item-object-casters menu-item-22607 last-child"><a href="http://www.casterconcepts.com/casters/99-series-super-heavy-duty-casters/">99 Series – Super Heavy Duty</a></li>
</ul>
</li>
<li id="menu-item-12999" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12999 has-children"><a href="http://www.casterconcepts.com/all-casters/caster-options/">Caster Options</a>
<ul class="sub-menu">
<li id="menu-item-22113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22113 first-child"><a href="http://www.casterconcepts.com/caster-brakes/">Caster Brakes</a></li>
<li id="menu-item-22117" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22117"><a href="http://www.casterconcepts.com/swivel-locks/">Swivel Locks</a></li>
<li id="menu-item-22119" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22119 last-child"><a href="http://www.casterconcepts.com/caster-options/">More Caster Options</a></li>
</ul>
</li>
<li id="menu-item-13029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13029 last-child has-children"><a href="http://www.casterconcepts.com/all-casters/caster-parts-accessories/">Caster Parts & Accessories</a>
<ul class="sub-menu">
<li id="menu-item-22114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22114 first-child"><a href="http://www.casterconcepts.com/replacement-axles/">Replacement Axles</a></li>
<li id="menu-item-22115" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22115"><a href="http://www.casterconcepts.com/spanner-bushings/">Spanner Bushings</a></li>
<li id="menu-item-22116" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22116"><a href="http://www.casterconcepts.com/straight-bearings/">Straight Roller Bearings</a></li>
<li id="menu-item-22118" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22118 last-child"><a href="http://www.casterconcepts.com/tapered-bearings/">Tapered Bearings</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-20817" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20817"><a>Caster Wheels</a>
<ul class="sub-menu">
<li id="menu-item-22493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22493 first-child"><a href="http://www.casterconcepts.com/wheels/">All Wheels</a></li>
<li id="menu-item-22345" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22345"><a href="http://www.casterconcepts.com/caster-wheels/cast-iron-wheels/">Cast Iron</a></li>
<li id="menu-item-22344" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22344"><a href="http://www.casterconcepts.com/caster-wheels/envirothane-wheels/">Envirothane</a></li>
<li id="menu-item-22343" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22343"><a href="http://www.casterconcepts.com/caster-wheels/flanged-wheels/">Flanged</a></li>
<li id="menu-item-22342" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22342"><a href="http://www.casterconcepts.com/caster-wheels/forged-steel-wheels/">Forged Steel</a></li>
<li id="menu-item-22341" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22341"><a href="http://www.casterconcepts.com/caster-wheels/keyway-wheels/">Keyway</a></li>
<li id="menu-item-22340" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22340"><a href="http://www.casterconcepts.com/caster-wheels/mold-on-rubber-wheels/">Mold on Rubber</a></li>
<li id="menu-item-22339" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22339"><a href="http://www.casterconcepts.com/caster-wheels/nytec-md-wheels/">NYTEC-MD</a></li>
<li id="menu-item-22338" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22338"><a href="http://www.casterconcepts.com/caster-wheels/phenolic-resin-wheels/">Phenolic Resin</a></li>
<li id="menu-item-22337" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22337"><a href="http://www.casterconcepts.com/caster-wheels/polyurethane-caster-wheels/">Polyurethane Caster</a></li>
<li id="menu-item-22336" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22336"><a href="http://www.casterconcepts.com/caster-wheels/softech-caster-wheels/">SOFTECH Caster</a></li>
<li id="menu-item-22335" class="menu-item menu-item-type-post_type menu-item-object-wheels menu-item-22335 last-child"><a href="http://www.casterconcepts.com/caster-wheels/v-groove-wheels/">V-Groove</a></li>
</ul>
</li>
<li id="menu-item-20813" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20813"><a>3D CAD</a>
<ul class="sub-menu">
<li id="menu-item-20815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20815 first-child"><a href="/standard-casters.php">Standard Casters</a></li>
<li id="menu-item-12109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12109 last-child"><a href="/custom-casters.php">Custom Casters</a></li>
</ul>
</li>
<li id="menu-item-20819" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20819"><a>Support</a>
<ul class="sub-menu">
<li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452 first-child"><a href="http://www.casterconcepts.com/support/catalog/">Catalog</a></li>
<li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453 has-children has-children-left"><a href="http://www.casterconcepts.com/support/engineering/">Engineering</a>
<ul class="sub-menu sub-menu-left">
<li id="menu-item-11689" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11689 first-child"><a href="http://www.casterconcepts.com/support/engineering/castershox/">CasterShoX</a></li>
<li id="menu-item-11688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11688"><a href="http://www.casterconcepts.com/support/engineering/caster-testing-machines/">Caster Testing Machines</a></li>
<li id="menu-item-11687" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11687 last-child"><a href="http://www.casterconcepts.com/support/engineering/conceptual-innovations/">Conceptual Innovations</a></li>
</ul>
</li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="http://www.casterconcepts.com/support/faqs/">FAQs</a></li>
<li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455 has-children has-children-left"><a href="http://www.casterconcepts.com/support/quote-forms/">Special Size Online Quote Forms</a>
<ul class="sub-menu sub-menu-left">
<li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459 first-child"><a href="http://www.casterconcepts.com/support/quote-forms/special-sized-dual-flanged-quote/">Special Size Dual Flanged Quote</a></li>
<li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-460"><a href="http://www.casterconcepts.com/support/quote-forms/special-sized-single-flanged-quote/">Special Size Single Flanged Quote</a></li>
<li id="menu-item-461" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461"><a href="http://www.casterconcepts.com/support/quote-forms/special-sized-u-groove-quote/">Special Size U Groove Quote</a></li>
<li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462 last-child"><a href="http://www.casterconcepts.com/support/quote-forms/special-sized-v-groove-quote/">Special Size V Groove Quote</a></li>
</ul>
</li>
<li id="menu-item-456" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-456"><a href="http://www.casterconcepts.com/support/technical-documents/">Technical Documents</a></li>
<li id="menu-item-12178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12178 last-child"><a href="http://www.casterconcepts.com/support/white-paper/">White Papers</a></li>
</ul>
</li>
<li id="menu-item-20821" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20821"><a>Solutions</a>
<ul class="sub-menu">
<li id="menu-item-16092" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16092 first-child"><a href="/solutions">Our Solutions</a></li>
<li id="menu-item-12144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12144"><a href="http://www.casterconcepts.com/solutions/by-application/">By Application</a></li>
<li id="menu-item-12147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12147"><a href="http://www.casterconcepts.com/solutions/caster-basics/">Caster Basics</a></li>
<li id="menu-item-16184" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16184"><a href="http://www.casterconcepts.com/solutions/castershox/">CasterShoX</a></li>
<li id="menu-item-12145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12145"><a href="http://www.casterconcepts.com/solutions/case-studies/">Case Studies</a></li>
<li id="menu-item-12149" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12149"><a href="http://www.casterconcepts.com/solutions/ergonomics/">Ergonomic Casters</a></li>
<li id="menu-item-12146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12146"><a href="http://www.casterconcepts.com/solutions/extreme-applications/">Extreme Casters</a></li>
<li id="menu-item-12148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12148"><a href="http://www.casterconcepts.com/solutions/mass-customization/">Mass Customization</a></li>
<li id="menu-item-12150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12150"><a href="http://www.casterconcepts.com/solutions/polyurethane-casters/">Polyurethane Casters</a></li>
<li id="menu-item-20778" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20778"><a href="http://www.casterconcepts.com/solutions/remold-poly-wheels/">Remold Poly Wheels</a></li>
<li id="menu-item-12141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12141 last-child"><a href="http://www.casterconcepts.com/solutions/shock-and-noise/">Shock & Noise Reducing Casters</a></li>
</ul>
</li>
<li id="menu-item-20823" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20823"><a>Company</a>
<ul class="sub-menu">
<li id="menu-item-13873" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13873 first-child"><a href="/blog">Caster Blog</a></li>
<li id="menu-item-18129" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18129"><a href="/company/contact-us">Contact Us</a></li>
<li id="menu-item-12186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12186"><a href="http://www.casterconcepts.com/company/distributors/">Distributors</a></li>
<li id="menu-item-16093" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16093 has-children has-children-left"><a href="/company/about-us/">About Us</a>
<ul class="sub-menu sub-menu-left">
<li id="menu-item-12172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12172 first-child"><a href="http://www.casterconcepts.com/company/employment/">Employment</a></li>
<li id="menu-item-12157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12157"><a href="http://www.casterconcepts.com/company/people/">People</a></li>
<li id="menu-item-12152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12152"><a href="http://www.casterconcepts.com/company/in-the-community/">In the Community</a></li>
<li id="menu-item-12165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12165"><a href="http://www.casterconcepts.com/company/our-capabilities/">Our Capabilities</a></li>
<li id="menu-item-22070" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22070"><a href="/albums/">Photos</a></li>
<li id="menu-item-12869" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12869 last-child"><a href="http://www.casterconcepts.com/company/about-us/we-build-trust/">We Build Trust</a></li>
</ul>
</li>
<li id="menu-item-21844" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21844 has-children has-children-left"><a>Media</a>
<ul class="sub-menu sub-menu-left">
<li id="menu-item-18452" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18452 first-child"><a href="http://www.casterconcepts.com/latest-news/">Latest News</a></li>
<li id="menu-item-18887" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18887"><a href="http://www.casterconcepts.com/newsletters/">Newsletters</a></li>
<li id="menu-item-22190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22190 last-child"><a href="http://www.casterconcepts.com/company/media/documentos/">Documentos (Español)</a></li>
</ul>
</li>
<li id="menu-item-12275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12275"><a href="/testimonials">Testimonials</a></li>
<li id="menu-item-12168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12168 last-child"><a href="http://www.casterconcepts.com/company/value-added-services/">Value Added Services</a></li>
</ul>
</li>
<li id="menu-item-19021" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19021 last-child"><a href="http://www.casterconcepts.com/videos/">Videos</a></li>
</ul> </div>
CSS
#nav{
float:right;
margin:56px 0;
position:relative;
background: #0c5e7c;
background: -moz-linear-gradient(top, #0c5e7c 0%, #204b66 49%, #094463 49%, #24637a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c5e7c), color-stop(49%,#204b66), color-stop(49%,#094463), color-stop(100%,#24637a));
background: -webkit-linear-gradient(top, #0c5e7c 0%,#204b66 49%,#094463 49%,#24637a 100%);
background: -o-linear-gradient(top, #0c5e7c 0%,#204b66 49%,#094463 49%,#24637a 100%);
background: -ms-linear-gradient(top, #0c5e7c 0%,#204b66 49%,#094463 49%,#24637a 100%);
background: linear-gradient(to bottom, #0c5e7c 0%,#204b66 49%,#094463 49%,#24637a 100%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
border:1px solid #0c4760;
box-shadow: 0 1px #1c81a5 inset;
z-index:999;
}
#nav a{
color:#fff;
text-decoration:none;
font-size:16px;
position:relative;
z-index:2;
}
#nav li.active > a{
color:#8fd7f5;
}
#nav li.current-menu-ancestor > a{
color:#8fd7f5;
}
#nav ul{
list-style:none;
padding:0 10px;
margin:0;
}
#nav > ul > li > a:hover{
color:#8fd7f5;
}
#nav ul:after{
content:"";
clear:both;
display:block;
}
#nav ul li{
float:left;
cursor:pointer;
background:url(images/nav-divider.gif) no-repeat 100% 50%;
}
#nav ul li:last-child{
background:none;
}
#nav ul li a{
display:block;
padding:10px 14px;
}
#nav ul li:hover > ul{
visibility:visible;
opacity:1;
top:130%;
}
#nav ul ul{
visibility:hidden;
opacity:0;
position:absolute;
top:180%;
padding:0;
/* -webkit-transition: all 50ms; */
/* -moz-transition: all 50ms; */
/* -ms-transition: all 50ms; */
/* -o-transition: all 50ms; */
/* transition: all 0.5s; */
background: #197396;
background: -moz-linear-gradient(top, #197396 0%, #0b4b72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#197396), color-stop(100%,#0b4b72));
background: -webkit-linear-gradient(top, #197396 0%,#0b4b72 100%);
background: -o-linear-gradient(top, #197396 0%,#0b4b72 100%);
background: -ms-linear-gradient(top, #197396 0%,#0b4b72 100%);
background: linear-gradient(to bottom, #197396 0%,#0b4b72 100%);
}
#nav ul ul a{
padding:5px 15px;
font-size:14px;
}
#nav ul ul:before{
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #197396;
top: -10px;
left: 20px;
}
#nav ul ul li{
float:none;
box-shadow: 0 1px 0 #27454f, 0 2px #6bbbd3;
position:relative;
background:none;
height:30px;
}
#nav ul ul li:last-child{
box-shadow:none;
}
#nav ul ul li:hover{
background: #0e4c68;
background: -moz-linear-gradient(top, #0e4c68 0%, #0d4360 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e4c68), color-stop(100%,#0d4360));
background: -webkit-linear-gradient(top, #0e4c68 0%,#0d4360 100%);
background: -o-linear-gradient(top, #0e4c68 0%,#0d4360 100%);
background: -ms-linear-gradient(top, #0e4c68 0%,#0d4360 100%);
background: linear-gradient(to bottom, #0e4c68 0%,#0d4360 100%);
box-shadow: 0 1px #182a30, 0 2px #6bbbd3, 0 1px #182a30 inset;
}
#nav ul ul li:first-child:hover{
box-shadow: 0 1px #182a30, 0 2px #6bbbd3;
}
#nav ul ul li:last-child:hover{
box-shadow: 0 1px #182a30 inset;
}
#nav ul ul ul{
left:120%;
visibility:hidden;
margin:0;
top:0;
}
#nav ul ul ul:before{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #196f8e;
top: 6px;
right:auto;
left: -19px;
}
#nav ul ul li:hover ul{
visibility:visible;
margin:0;
top:0;
left:107%;
}
#nav .has-children:after{
content: "";
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid rgba(255,255,255,0.2);
position: absolute;
right: 2px;
top: 10px;
z-index: 1;
}
#nav .sub-menu-left{
right:120%;
left:auto;
}
#nav ul ul li:hover .sub-menu-left{
right:107%;
left:auto;
}
#nav .sub-menu-left:before{
border-left: 10px solid #196f8e;
border-right:none;
right: -9px;
left:auto;
}
#nav .has-children-left:after{
border-right: 10px solid rgba(255,255,255,0.2);
border-left: none;
right: auto;
left: 1px;
}
答案 0 :(得分：2)
答案 1 :(得分：1)
此处height元素的固定li：
#nav ul ul li {
height:30px;
}
为min-height更改此内容：
#nav ul ul li {
min-height:30px;
}