gpt4 book ai didi

html - 当我将鼠标悬停在导航栏上时,列表项会向前移动

转载 作者:行者123 更新时间:2023-11-28 00:40:55 24 4
gpt4 key购买 nike

谁能帮我解决这个问题。当我将鼠标移到 TOYOTA 上时,HONDA 和 CONTACT US 会向前移动。我不想要这个。我只想当我将鼠标移到 TOYOTA 和 HONDA 上时,下一个列表 iten 不应向前移动。如何修复它。这是我的代码。

body {background-color: black;}
ul {list-style: none;
margin: 0px;
padding: 0px;
}
ul li {float: left;

}
li ul {display: none;}

ul li a {display:block;
text-decoration: none;
padding:30px 60px;

color: lightgray;
}

ul li a:hover {background: white;
color: red;

}
li:hover ul {
display:block;
}
li:hover li{
float: none;
background: red;
}
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">TOYOTA</a>
<ul>
<li><a href="#">TOYOTA COROLLA PRIUS</a></li>
<li><a href="#">TOYOTA COROLLA ALTIS</a></li>
</ul>
</li>
<li><a href="#">HONDA</a>
<ul>
<li><a href="#">HONDA</a></li>
<li><a href="#">HONDA</a></li>
</ul>

</li>
<li><a href="#">CONTACT US</a></li>
</ul>
</body>

最佳答案

直接申请

li:hover ul{
position: absolute;
}

关于html - 当我将鼠标悬停在导航栏上时,列表项会向前移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53850426/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com