嗨,我知道这个问题已经被问过好几次了,但我无法弄清楚我在代码中做错了什么。当我将鼠标悬停在APPLIANCES上时,我的下拉 block 显示perfecteley,但是一旦我尝试选择任何元素DROP DOWN DISAPPER。下面是我的代码:-
HTML:-
#nav_wrapper
{
position: relative;
top: 70px;
left: 100px;
}
#nav_wrapper ul{
list-style-type: none;
}
#nav_wrapper ul li{
outline: 1px solid white;
width: 160px;
text-align: center;
position: relative;
float: left;
background: black;
z-index: 1000;
}
#nav_wrapper ul li a{
text-decoration: none;
display: inline-block;
height: 25px;
width: 160px;
padding-top: 5px;
color: #DAA520;
font-family: cursive;
}
#nav_wrapper ul ul.one
{
display: none;
}
#nav_wrapper ul li a:hover {
color: wheat;
}
#nav_wrapper ul li a:hover + ul.one {
display: inline-block;
height: 25px;
}
<div id="nav_wrapper">
<ul>
<li><a href="#">ELECTRONICS</a>
</li>
<li><a href="#">APPLIANCES</a>
<ul class="one">
<li><a href="#">TV</a></li>
<li><a href="#">WASHING MACHINE</a></li>
</ul>
</li>
<li><a href="#">MEN</a></li>
<li><a href="#">WOMEN</a></li>
<li><a href="#">BABY&KIDS</a></li>
<li><a href="#">HOME&FURNITURE</a></li>
<li><a href="#">BOOKS&MORE</a></li>
</ul>
</div>
有人可以帮我吗?
最佳答案
下面是代码..刚刚更改了悬停CSS.. 我的代码正在运行,请参见图片..
#nav_wrapper ul li:hover > ul.one {
display: inline-block;
height: 25px;
}
#nav_wrapper {
position: relative;
top: 70px;
left: 100px;
}
#nav_wrapper ul {
list-style-type: none;
}
#nav_wrapper ul li {
outline: 1px solid white;
width: 160px;
text-align: center;
position: relative;
float: left;
background: black;
z-index: 1000;
}
#nav_wrapper ul li a {
text-decoration: none;
display: inline-block;
height: 25px;
width: 160px;
padding-top: 5px;
color: #DAA520;
font-family: cursive;
}
#nav_wrapper ul ul.one {
display: none;
}
#nav_wrapper ul li a:hover {
color: wheat;
}
#nav_wrapper ul li:hover > ul.one {
display: inline-block;
height: 25px;
}
<div id="nav_wrapper">
<ul>
<li><a href="#">ELECTRONICS</a>
</li>
<li><a href="#">APPLIANCES</a>
<ul class="one">
<li><a href="#">TV</a>
</li>
<li><a href="#">WASHING MACHINE</a>
</li>
</ul>
</li>
<li><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">BABY&KIDS</a>
</li>
<li><a href="#">HOME&FURNITURE</a>
</li>
<li><a href="#">BOOKS&MORE</a>
</li>
</ul>
</div>
关于html - 当我尝试选择任何元素时,下拉菜单会隐藏。??(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42158084/