不知道如何为我的导航栏修复我的 css

我有这个列表，我尝试了一堆我认为使我的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中子菜单的不透明度。这是有效的jsfiddle版本

$(document).ready(function(){
    $('#flight').hover(function(){
        $('#flightsub').fadeTo('fast', 1);
    });
});

相关内容

最新更新

热门标签：