![](/img/trans.png)
[英]HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
[英]Having trouble with the dropdown menu as its not appearing on hovering (just a html-css template)
我在为简单的下拉菜单编写代码时遇到了麻烦,但是无法理解我做错了什么,仍然是编码的新手。 每当我将光标移到相应的下拉li
标签上时,就会出现悬停颜色效果,但是没有下降。 在先前的尝试中,当代码稍有不同时,列表id
出现了,但是它以内inline
方式出现,并且水平对齐而不是垂直对齐。
#navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; overflow: hidden; } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } a:hover { background-color: #d3d3d3; color: black; } ul li ul li { display: none; } ul li:hover ul li { display block; } #searchbar { margin: 5px 5px 0px 0px; float: right; }
<div id="navbar"> <div> <ul id="nav"> <li id="main"><a href="#">Home</a></li> <li id="main"><a href="#">Products</a></li> <li id="main"><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li id="main"><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div>
首先,将id="main"
应用于多个元素。 id
是唯一的,并且仅应用于一个元素。
其次,您的hover
效果还有些不完整。 请在下面查看我的更改。
#navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; /*overflow: hidden; don't do this if you want dropdowns */ } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } #nav>li>a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } #nav>li>a:hover { background-color: #d3d3d3; color: black; } #nav>li { position: relative; display: inline-block; } #nav>li ul { display: none; position: absolute; } #nav>li:hover ul { display: block; bottom: -80px; padding: 10px; left: 0; min-width: 100px; } #searchbar { margin: 5px 5px 0px 0px; float: right; }
<div id="navbar"> <div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div>
您需要定位要显示和隐藏的ul li ul
,并且#main id不能在同一页面上重复。
#navbar { background-color: #9C9C9C; margin: 0px 200px 0px 200px; height: 30px; overflow: hidden; } #nav { padding: 0px; margin: 0px; font-family: arial; } #main { display: inline; } a { display: block; text-align: center; float: left; width: 100px; padding: 3px; line-height: 25px; text-decoration: none; color: white; margin-top: 0px; } a:hover { background-color: #d3d3d3; color: black; } ul li{display: inherit;} ul li ul { display: none; width: auto; position: absolute; top: 35px; background: #ccc; margin: 0; padding: 0; } ul li ul li{display:block; list-style-type:none} ul li:hover ul { display: block; z-index:1000; } #searchbar { margin: 5px 5px 0px 0px; float: right; }
<div id="navbar"> <div> <ul id="nav"> <li class="nestedchild"><a href="#">More</a> <ul class="c"> <li class="B"><a id="A">Article1</a></li> <li class="B"><a id="A">Article2</a></li> <li class="B"><a id="A">Article3</a></li> <li class="B"><a id="A">Article4</a></li> </ul> </li> <li id="main"><a href="#">About US</a></li> </ul> </div> <div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div> </div>
您的CSS应该是这样的。
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
你也可以在这里看到演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.