Question

我有这个列表，我尝试过一堆css，我认为这会使我的html显示不正确。我试图让.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>

Answer 1

我更改了一些内容，添加了一些javascript并更改了css中子菜单的不透明度。这是working jsfiddle version

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

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

1 个答案: