gpt4 book ai didi

css - 不确定如何为我的导航栏修复我的 css

转载 作者:行者123 更新时间:2023-11-28 08:01:35 25 4
gpt4 key购买 nike

我有这个列表,我已经尝试了一堆我认为使我的 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/

25 4 0