我尝试使用 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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句