我有这个列表，我已经尝试了一堆我认为使我的 html 显示不正确的 css。我正在尝试让 .submenu 列表项在悬停时显示并在未突出显示时隐藏。
http://jsfiddle.net/marcuccione/Lwjsry4h/
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Fly Hays</title>
<--<link rel="stylesheet" type="text/css" href="navbarsnippet.css"> -->
<style>
*{
font-family:Helvetica, Arial, Tahoma, Verdana, sans-serif;
padding:0;
margin:0;
}
.clearfix:after {
display:block;
clear:both;
}
nav {
height:50px;
margin:0px auto;
background-color:#2E2728;
}
nav ul{
height:50px;
width:750px;
margin:0 auto;
font-weight:bold;
}
nav ul li {
margin:0px;
list-style-type:none;
width:150px;
float:left;
}
nav ul li .submenu{
}
nav ul li .submenu a, li a{
text-decoration:none;
color:white;
line-height:50px;
display:block;
text-align:center;
}
nav a {
transition:all linear 0.15s;
}
.submenu a:hover, li a:hover{
background-color:#c0c0c0;
color:#830300;
z-index:1;
opacity:1;
}
.submenu{
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
position:absolute;
}
.submenu li a {
padding:10px 30px;
display:block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Flights</a>
<ul class="submenu">
<li><a href="#">Book a Flight</a></li>
<li><a href="#">Check Flight Status</a></li>
<li><a href="#">View Timetable</a></li>
<li><a href="#">TSA Guidelines</a></li>
<li><a href="#">Denver Airport Map</a></li>
<li><a href="#">Directions to the Airport</a></li>
</ul>
</li>
<li><a href="#">Visitors</a>
<ul class="submenu">
<li><a href="#">Places to Eat</a></li>
<li><a href="#">Things to See</a></li>
<li><a href="#">Where to Stay</a></li>
</ul>
</li>
<li><a href="#">General Aviation</a>
<ul class="submenu">
<li><a href="#">Field Condition Report</a></li>
<li><a href="#">Airport Information</a></li>
<li><a href="#">Prior Permission Request</a></li>
<li><a href="#">Businesses at the Airport</a></li>
</ul>
</li>
<li><a href="#">Transportation</a>
<ul class="submenu">
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul class="submenu">
<li><a href="#">FAQ's</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Media Gallery</a></li>
<li><a href="#">Public Notices</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Rent the Conference Room</a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
最佳答案
我改变了一些东西，添加了一些 javascript 并改变了 css 中子菜单的不透明度。这是 working jsfiddle version
$(document).ready(function(){
$('#flight').hover(function(){
$('#flightsub').fadeTo('fast', 1);
});
});
关于css - 不确定如何为我的导航栏修复我的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29725110/