我正在尝试根据自己的需要调整在 Nettuts 上找到的解决方案。总的来说，它工作得很好，除了当我将鼠标悬停在具有子导航的顶级导航元素上时遇到一些奇怪的行为 - 该特定元素下方的阴影消失并且不会回来。Nettuts 资源可以在这里找到。
这是 HTML 的一个片段：
<div class='navbar'>
<div class='content'>
<nav id='topNav'>
<ul>
<li>
<a class='nav home' href='/' title='Home'>Home</a>
</li>
<li class='parent'>
<a class='nav about' href='/about' title='About'>About</a>
<ul>
<li>
<a href='/about' title='History'>History</a>
</li>
<li>
<a href='/leadership' title='Leadership'>Leadership</a>
</li>
<li>
<a href='/directors' title='Directors'>Directors</a>
</li>
<li>
<a href='/science_advisory_board' title='Scientific Advisory Board'>Scientific Advisory Board</a>
</li>
<li>
<a href='/mission_statement' title='Acetylon Mission'>Acetylon Mission</a>
</li>
<li class='last'>
<a href='/careers' title='Careers'>Careers</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
这是CSS：
.no-js nav li:hover ul { display: block; }
div.container { width: 100%; }
div.navbar { background: url("/images/navbar_bg.jpg") repeat-x scroll center top transparent; border: medium none; box-shadow: 0 3px 3px #555555; height: 44px; width: 100%; }
nav { font: 1.4em 'myriad-pro', sans-serif; margin: 0 auto; position: relative; width: 978px; z-index: 1; height: 0; }
nav ul { padding: 0; margin: 0; }
nav li { position: relative; display: inline-block; list-style-type: none; margin-bottom: 0; }
nav li br { display: block; line-height: .4em; }
nav li:first-child a { border-left: none; }
nav li.last a { border-right: none; }
nav li a { display: inline-block; color: #fff; text-decoration: none; font-family: 'myriad-pro', sans-serif; font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; width: 130px; vertical-align: bottom; padding: 0 16px 0 22px; }
nav li a:focus { outline: none; text-decoration: underline; }
nav li a.nav { word-wrap: break-word; line-height: 3.1em; height: 3.1em; }
nav li a.center { line-height: 1em; height: 3.1em; }
nav li a.nav:hover, nav li a.center:hover { background: url("/images/navbar_hover_bg.jpg") top center repeat-x; border: none; }
nav li a.center:hover { background: url("/images/navbar_hover_bg.jpg") top center repeat-x; border: none; }
nav li a.home { width: 64px; text-align: center; }
nav li a.about { width: 121px; }
nav ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
nav a span { display: block; float: right; margin-left: 5px; }
nav ul ul { display: none; width: auto; position: absolute; left: 0; background: #E6F1F8; width: 180px; padding-bottom: 10px; }
nav ul ul li { float: none; display: block; }
nav ul ul a { margin-top: 11px; padding: 0 10px; border-left: none; border-right: none; font-size: .8em; color: #606062; line-height: 1em; }
nav ul ul a:hover { color: #004d9d; }
和 JS
$(document).ready(function() {
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").appendTo($(this).children(":first"));
$("<li><hr style='width: 90%; color: #606062;' /></li>").appendTo($(this).find('li:not(:last-child)'));
//show subnav on hover
$(this).hover(
function() {
$(this).find("ul").stop(true, true).slideDown();
$($(this).closest('.parent').children()[0]).css('background', 'url("/images/navbar_hover_bg.jpg") top center repeat-x');
},
function() {
$(this).find("ul").stop(true, true).slideUp();
$($(this).closest('.parent').children()[0]).css('background', 'url("/images/navbar_bg.jpg") top center repeat-x');
}
);
}
});
});