使用以下代码,我可以显示关于和常见问题子菜单,但鼠标悬停时不会出现任何内容,我不知道为什么。请帮忙!如果我应该显示更多代码,请告诉我!在此先感谢您的帮助:)
的HTML:
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Gallery Tour</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>
<li><a href="#">Accomodations</a></li>
<ul>
<li><a href="#">Event Space</a></li>
<li><a href="#">Guest Rooms</a></li>
<li><a href="#">Kitchen and Catering Facility</a></li>
</ul>
</li>
<li><a href="#">Activities</a></li>
<ul>
<li><a href="#">The Katy Trail</a></li>
<li><a href="#">Augusta</a></li>
<li><a href="#">St. Louis Attractions</a></li>
</ul>
<li><a href="#">Reservations</a></li>
<ul>
<li><a href="#">Rates</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Request Info</a></li>
<li><a href="#">Event Agreement Form</a></li>
</ul>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Additional Info</a></li>
<li><a href="#">Catering</a></li>
</ul>
</ul>
CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);