[英]CSS hover in a nav bar
我試圖使用ul li制作導航欄並禁用CSS中的文本格式。 該代碼幾乎可以正常工作,因為我還為按鈕制作了一個小的淡入動畫。 如果我的導航欄中有一個下拉菜單,則會出現問題。 將鼠標懸停在其中具有下拉列表的li上也會使下拉列表中的內容動畫化。
我知道可能有一些選擇器可以使它不起作用,但是到目前為止我還沒有使它起作用。 正確的做法是什么?
這是HTML:
<nav>
<ul>
<a href="index.html"><li id="left">Home</li></a>
<a href="#"><li>Menu 1</li></a>
<li><span>Dropdown</span>
<ul>
<a href="#"><li>Dropdown menu 1</li></a>
<a href="#"><li>Dropdown menu 2</li></a>
</ul>
</li>
<a href="#"><li>Menu 3</li></a>
<a href="#"><li id="right">Contact me</li></a>
</ul>
</nav>
這是CSS:
nav{
display: inline;
float: left;
background-color: #d48041;
box-shadow: 0 1vh 2vh -0.5vh #F2B57B inset;
width:90%;
padding-left:10%;
height:5%;
font-weight: bold;
}
nav ul{
list-style: none;
margin:0;
padding:0;
display: inline;
}
nav ul a{
text-decoration: none;
color: black;
font-size: 1.5vh;
}
nav ul a li{
display:inline-block;
float:left;
text-align: center;
height: 5vh;
line-height: 5vh;
width:10%;
margin:0;
box-sizing: border-box;
}
nav ul li ul{
display:none;
}
nav ul li:hover ul{
display:block;
position: absolute;
z-index: 1;
width: 91%;
margin-left: -0.1vw;
}
nav ul li ul li{
background-color: #FFA968;
border: solid 0.04vw black;
}
nav ul a li:not(.noborder), nav ul li {
border-right: solid 0.04vw black;
}
#left {
border-left: solid 0.04vw black;
}
#right {
float: right;
width: 20%;
margin-right:11.1%;
border-left: solid 0.04vw black;
}
nav ul a:hover{
animation-name: text_fadein;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
nav ul li:hover span{
cursor: default;
}
nav ul a:hover li{
animation-name: menu_fadein;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
為防止將動畫應用於子級,請使用>
選擇器選擇直接子級。
nav ul>a:hover{
animation-name: text_fadein;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
nav ul>li:hover span{
cursor: default;
}
nav ul>a:hover>li{
animation-name: menu_fadein;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.