gpt4 book ai didi

css - 下拉菜单列表问题 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 04:37:40 27 4
gpt4 key购买 nike

我的下拉菜单无法使用!它在 Jsfiddle 上有效,但在现实生活中无效……大声笑。我对此很陌生。我希望这不是一个愚蠢的问题。我试图找到解决方案,但还没有找到一个可以按照我希望的方式工作的解决方案。

<!DOCTYPE html>

<html>
<head>
<title>Home - Joe </title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<ul id="nav">
<li> <a href="index.html"> Home </a></li> <!-- menu-->
<li> <a href="music.html"> Music </a></li>
<ul class="dropdown">
<li><a href="#">Albums</a></li> <!-- drop down list-->
<li><a href="#">Downloads</a></li>
<li><a href="#">Videos</a> </li>
</ul>
<li> <a href="Portfolio.html"> Portfolio </a></li>
<ul class="dropdown">
<li><a href="#">Photography</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Webpages</a> </li>
</ul>
<li> <a href="About.html"> About </a></li>
<ul class="dropdown">
<li><a href="#">Biography</a></li>
<li><a href="#">Interests</a></li>
<li><a href="#">Goals</a> </li>
</ul>
<li> <a href="Contact.html"> Contact </a></li>
</ul>
</div>


<div id="ContentLeft">
</div>
<div id="ContentBottom">
</div>
</body>
</html>

CSS:

body {
color: #666;
text-align: left;
margin: 0px;
font-family: Roboto;
font-weight: lighter;
}

#header {
width:100%;
height:20px;
background:#333;
border-bottom:1px solid #000;
padding: 5px 5px 5px 0px;
}

.dropdown{
display:none;
list-style-type:none;
background:#333;
}


#nav {
list-style-type: none;
margin-top: 0px;
margin-left:-30px;
background:#333;
float:left;

}

#nav li {
padding:0px 10px 0px 10px;
float:left;
}

#nav li a {
color: #666;
text-decoration: none;
}

#nav li a:hover {
color: #CCC;
}
#nav li:hover ul{
display:block;
position: absolute;
margin: 0px 0px 0px -10px;
padding:0;
text-align: left;
}

#nav li:hover li{
float:none;
background:#333;
}

#nav li a:active {
color: #FFF;
}

http://jsfiddle.net/WwuRK/ <--- 我希望它像这样工作。

最佳答案

你需要包装<ul> <li> .在您当前的示例中,您正在执行以下操作:

<body>
<div id="header">
<ul id="nav">
<li> <a href="index.html"> Home </a></li> <!-- menu-->
<li> <a href="music.html"> Music </a></li>
^----------- remove
<ul class="dropdown">
<li><a href="#">Albums</a></li> <!-- drop down list-->
<li><a href="#">Downloads</a></li>
<li><a href="#">Videos</a> </li>
</ul>
</li> <-------- add removed </li> here
<li> <a href="Portfolio.html"> Portfolio </a></li>
^----------- remove

删除标签并将它们添加到之后 ul.dropdown .

这是您当前代码的演示(不起作用): http://jsfiddle.net/dirtyd77/WwuRK/4/


这是您的代码的更新版本:

<div id="header">
<ul id="nav">
<li> <a href="index.html"> Home </a></li> <!-- menu-->
<li> <a href="music.html"> Music </a>
<ul class="dropdown">
<li><a href="#">Albums</a></li> <!-- drop down list-->
<li><a href="#">Downloads</a></li>
<li><a href="#">Videos</a> </li>
</ul>
</li>
<li> <a href="Portfolio.html"> Portfolio </a></li>
<ul class="dropdown">
<li><a href="#">Photography</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Webpages</a> </li>
</ul>
<li> <a href="About.html"> About </a>
<ul class="dropdown">
<li><a href="#">Biography</a></li>
<li><a href="#">Interests</a></li>
<li><a href="#">Goals</a> </li>
</ul>
</li>
<li> <a href="Contact.html"> Contact </a></li>
</ul>
</div>


<div id="ContentLeft"></div>
<div id="ContentBottom"></div>

编辑代码的工作演示:http://jsfiddle.net/dirtyd77/WwuRK/6/

希望这对您有所帮助,如果您有任何问题,请告诉我。

关于css - 下拉菜单列表问题 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16043114/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com