我正在努力使这个侧面菜单更加用户友好。如果你从下往上盘旋，你可以毫不费力地浏览它，但如果你从上面的一个盘旋，当你试图将鼠标悬停在另一个父盘上时，它会让用户很难切换到另一个父盘。我认为最好是延迟其影响，以便用户有时间从一个父母切换到另一个父母。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<style>
#nav
{
margin:0;
padding:0;
float:left;
background:white;
}
#nav li
{
list-style:none;
background:#f8f8f8; width:209px;
border-bottom: 1px solid #666;
}
#nav li a
{
display:block;
padding:8px;
border-left:4px solid #a89172;
text-decoration:none; color:#4b4b4b;
text-transform: uppercase;
font-family:serif;
font-size: 15px;
-webkit-transition:background 0.2s, color 0.2s;
-moz-transition:background 0.2s, color 0.2s;
-ms-transition:background 0.2s, color 0.2s;
-o-transition:background 0.2s, color 0.2s;
transition:background 0.2s, color 0.2s;
}
#nav li a:hover
{
border-left: 4px solid #d5bb8d;
background: #f8f8f8;
text-transform: uppercase;
font-family:serif;
font-size: 15px;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-ms-transition-delay:0.1s;
-o-transition-delay:0.1s;
transition-delay:0.1s
}
#nav li ul
{
visibility: hidden;
display:none;
opacity:0;
transition:opacity 0.5s linear;
}
#nav li:hover ul
{
margin-left:-2pc;
visibility: visible;
display:block;
opacity:1;
}
#nav li:hover ul li
{
background:#a89172;
margin-left: 5px;
border-left: 4px solid #d5bb8d;
}
#nav li:hover ul li a
{
color:#ffffff;
text-transform: uppercase;
font-family:serif;
font-size: 13px;
}
#nav li:hover ul li a:hover
{
background:#d5bb8d;
border-left: 4px solid #d5bb8d;
color:ffffff;
text-transform: uppercase;
font-family:serif; font-size: 13px;
}
}
/*box-shadow: 2px 2p*/
</style>
<ul id="nav">
<li><a href="http://store.premierequestrian.com/Dressage_c_6.html">Dressage </a>
<ul>
<li><a href="http://store.premierequestrian.com/Dressage-Arenas_c_171.html">Dressage Arenas</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Arena-Packages_c_172.html">Dressage Arena Packages</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Flower-Boxes_c_14.html">Dressage Flower Boxes</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Accessories_c_13.html">Dressage Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Silk-Flowers_c_15.html">Silk Flowers</a></li>
<li><a href="http://store.premierequestrian.com/Cavaletti_c_9.html">Cavaletti</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_173.html">Training Obstacles</a></li>
<li><a href="http://premierequestrian.com/category/Arenas/underConstruction.html" target="_blank">Western Dressage</a></li>
<li><a href="http://premierequestrian.com/category/Arenas/dressageArenaLayouts.html" target="_blank">Dressage Assembly Instructions</a></li>
</ul>
</li>
<li><a href="http://premierequestrian.com/category/Horse-Arena-Footing.html" target="_blank">Horse Arena Footing</a>
<ul>
<li><a href="http://premierequestrian.com/category/footing-products/PremierHT-Footing.html" target="_blank">Premier HT</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/master-blend.html" target="_blank">Master Blend Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/ggtfooting.html" target="_blank">GGT Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/ProTex.html">ProTex Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/athletex.html" target="_blank">Athletex Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/prostride.html" target="_blank">ProStride Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/hydrokeep.html" target="_blank">Hydro-keep Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/Horse-Arena-Footing.html">Arena Maintenance Equipment</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/newConstruction.html" target="_blank">Horse Arena Construction</a></li>
<li><a href="http://premierequestrian.com/category/otto-products/otto-perforated.html" target="_blank">Otto Sport</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Horse-Jumps_c_170.html" target="_blank">Horse Jumps</a>
<ul>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Standards_c_7.html">Horse Jumps Standards</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Fills_c_11.html">Horse Jumps Jump Fills</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Gates_c_8.html">Horse Jumps Gates</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Poles_c_21.html">Horse Jumps Poles</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Flower-Boxes_c_176.html">Horse Jumps Flower Boxes</a></li>
<li><a href="http://store.premierequestrian.com/Jump-Cups_c_62.html">Jumps Cups</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Accessories_c_18.html">Horse Jump Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Sponsor-Theme-Jumps_c_87.html">Sponsor / Theme Jumps</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Courses_c_17.html">Horse Jumps Courses</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Assemblies_c_19.html">Horse Jumps Assemblies</a></li>
<li><a href="http://store.premierequestrian.com/Cavaletti_c_177.html">Cavaletti</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_178.html">Training Obstacles</a></li>
<li><a href="http://store.premierequestrian.com/Mini-Pony-Kids-Jumps_c_131.html">Kids Jumps</a></li>
<li><a href="http://horsejumps.net/Category/Standards/Jump-Assembly-Instructions.html" target="_blank">Jump Assembly Instructios</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Barn-Stable_c_10.html">Barn & Stable</a>
<ul>
<li><a href="http://store.premierequestrian.com/TrunksStorage_c_74.html">Trunks/Storage</a></li>
<li><a href="http://store.premierequestrian.com/Carts_c_72.html">Carts</a></li>
<li><a href="http://store.premierequestrian.com/Mounting-Blocks_c_73.html">Mounting Blocks</a></li>
<li><a href="http://store.premierequestrian.com/Racks-Hardware_c_75.html">Racks & Hardware</a></li>
<li><a href="http://store.premierequestrian.com/Feeders-Waterers_c_150.html">Feeders & Waterers</a></li>
<li><a href="http://store.premierequestrian.com/EZ-Grip-Mat-Mover_c_162.html">Ez-Grip Mat Mover</a></li>
<li><a href="http://www.dressagearena.net/pages/stallmats.html" target="_blank">Ruber Stall Mats</a></li>
<li><a href="http://www.dressagearena.net/pages/hoofgrid.html" target="_blank">Hoof Grid</a></li>
<li><a href="http://www.dressagearena.net/pages/barnaccessoriestrailer.html" target="_blank">Barn & Trailer Accessories</a></li>
<li><a href="http://dressagearena.net/pages/barn-and-stables.html">Barn & Stable Packages</a></li>
<li><a href="http://www.dressagearena.net/pages/fencing.html" target="_blank">Vinyl Fencing</a></li>
<li><a href="http://store.premierequestrian.com/Yard-Decor_c_155.html">Yard Decor</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/PremierGroomer.html" target="_blank">Arena Maintenance Equipment</a></li>
<li><a href="http://www.dressagearena.net/pages/fly_control.html" target="_blank"> Fly Control</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Horse-Rider_c_152.html">Horse & Rider</a>
<ul>
<li><a href="http://store.premierequestrian.com/Wireless-Audio-Systems_c_98.html">ComTek Wireless System</a></li>
<li><a href="http://store.premierequestrian.com/Riding-Apparel_c_161.html">Riding Apparel</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_185.html">Training Obstacles</a></li>
<li><a href="http://store.premierequestrian.com/Training-Accessories_c_186.html">Training Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Toys_c_187.html">Horse Toys</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Tack_c_188.html">Horse Tack</a></li>
<li><a href="http://www.dressagearena.net/pages/horse_care_nutrition.html" target="_blank">Care & Nutrition</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLxtS4Ltt9gzaNqvUFitFaBK22GmcvPMFT" target="_blank">ProTips Video Clips</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Books-DVDs-Gifts_c_16.html">
Books/DVD's/Gifts</a>
<ul>
<li><a href="http://store.premierequestrian.com/Books_c_70.html">Books</a></li>
<li><a href="http://store.premierequestrian.com/DVDs_c_140.html">DVD's</a></li>
<li><a href="http://store.premierequestrian.com/Gifts_c_154.html">Gifts</a></li>
<li><a href="http://www.kidjumps.net/" target="_blank">Kid Jumps</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$('.nav ul li').hover(function(){
$(this).children('ul').stop(true,false,true).slideToggle(400);
});
</script>