这是你可以做的,根本不包括 jQuery。
http://jsfiddle.net/qsENf/1/
我只包含了“关于”部分的 css,但可以轻松更改代码以处理任何项目。我不知道这是否是您想要的,但应该很接近。如果您想使用 jQuery,那么您可以定义 css 类并使用 jQuery 添加它们,而不是更改所有元素的 css。
这是CSS:
.submenu_about {
display: none;
}
.about {
background:transparent;
}
.about:hover {
background:#144f19;
}
.about:hover .submenu_about {
display: block;
}
和html:
<div class="navigation_bar">
<ul class="menu_list">
<li class="a_menu_item about">
About Us
<div class="submenu_about">
<ul class="items_list" style="list-style:none">
<li class="a_sub_menu_item"><a href="#">News and Events</a></li>
<li class="a_sub_menu_item"><a href="">Financial Assistance</a></li>
<li class="a_sub_menu_item"><a href="">Who We See</a></li>
<li class="a_sub_menu_item"><a href="">Insurance Information</a></li>
</ul>
</div>
</li>
<li class="a_menu_item theater">Theater</li>
<li class="a_menu_item leader">Leadership Team</li>
<li class="a_menu_item career">Careers</li>
<li class="a_menu_item contact">Contact Us</li>
</ul>
</div>
jQuery isn't necessary for this. If your subnav is not inside of the main nav then jQuery would be useful for toggling its visibility.