通过悬停我的CSS下拉菜单选项的用户点击后唯一的工作时,单击下拉节目之后,完美徘徊的行为的时候,我想不通为什么它会发生,以及如何使悬停不等待单击,
继承人的HTML代码:
<li>
<a href="#" class="nav-item">events</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
<a href="#" class="nav-item">weddings</a>
<div class="underline"></div>
</li>
<li>
<a href="#" class="nav-item">parties</a>
<div class="underline"></div>
</li>
<li>
<a href="#" class="nav-item">birthdays</a>
<div class="underline"></div>
</li>
</ul>
</div>
</div>
</li>
继承人的相关CSS:
.nav-item {
display: inline-block;
padding: 20px, 30px;
height: 0px;
width: 130px;
color: black;
text-decoration: none;
border-color: black;
line-height: 40px;
}
.nav-content{
position: absolute;
background-color: white;
border-color: black;
color: #000000; font-family: "Varela Round";
font-size: 15px;
line-height: 24px;
text-align: right;
list-style-type: none;
z-index: 99999;
display: none;
left: 1110px;
}
.nav-sub{
padding: 1px;
border: 1px solid #000000;
position: relative;
z-index: 10;
}
.nav-sub ul li:hover {
background-color: black;
}
.nav-sub ul li:hover > .nav-item{
color: white;
}
.nav-item:focus{
background-color:whitesmoke;
}
.nav-item:hover ~ .nav-content{
display: block;
}
.nav-content:hover{
display: block;
}
一般来说,在这里你的代码是一个下拉导航菜单非常稳固。它也可以作为就是对jsFiddle。如果它没有显示出来,直到你点击,你的一些其他代码(未公布)的干扰。您可能需要发布您的代码的其余部分以适应搞清楚帮助是什么原因造成这种行为。
注意:
你会发现,定位将是件苦差事,除非你做一些改动。这是因为相对于窗口绝对定位通常只会带来麻烦。
/* Makes absolute children relative to the container */
li {
position: relative;
}
.nav-content {
...
left: 0;
...
}
小提琴显示的变化,仅仅是因为它是另外使得无法进入示范。