导航栏幻灯片不会卡住，当光标在顶部和页面有一个小滚动向下
所以我的代码有两个问题，第一个问题是导航栏有一个向下滑动的子菜单，当你把光标放在上面时，它应该会停留在那里，但它会回到上面(当主用户界面是绝对的时候，它不会这样做)。
第二个问题是网页有一个小的向下滚动(它不应该)，我已经得出结论，这是与图像有关，但找不到问题或解决方案。
Codepen：https://codepen.io/OscarArranz/pen/pKoZmg
while(threadopen){
//I needed some code here to send the thread//
}提前感谢！
回答 1
Stack Overflow用户
发布于 2018-05-30 05:47:42
问题1:悬停
在header nav ul li:hover > ul {中添加z-index: 1;可以使其正常工作。如果不将z-index设置得更大，将使其他元素“高于”它，就像它没有悬停时一样，因此类将不会应用(也将其设置为0 works)。
注意：没有必要将header nav ul放在.lired之前，这是您使用类和is的主要原因，除非有更多具有相同类的元素，并且您只想在.lired > nav > ul中设置header的样式(事实并非如此)。
问题2:小卷轴
只需将您的margin: 12.4vh auto;声明更改为更小的声明即可。示例：
main {
margin: 10vh auto;
}同样，只要您不使用"main“，我就会删除它，并将相同的值设置为.promotext。
使用vh的问题是，您必须将元素的高度设置为x，而不管它是否已经适合整个高度(还建议将body的高度设置为100%)。
更新1:解决了使用 z-index相关CSS代码时的奇怪动画问题：
/* MENU PRINCIPAL */
header nav ul {
list-style: none;
text-align: center;
z-index: 0;
}
header nav ul li {
display: inline-block;
}
header nav ul li a {
display: block;
padding: 2vh 1.3vw;
color: #000;
text-decoration: none;
font-family: 'Didact Gothic', sans-serif;
font-size: 2.4vh;
}
/* SUBMENUS GENERAL */
header nav ul li ul {
opacity: 0;
width: 100%;
top: 0.83vh;
left: 0;
position: absolute;
z-index: -1;
transition: all 0.5s ease;
border-style: none;
}
header nav ul li ul li a {
font-size: 1.8vh;
}
header nav ul li:hover > ul{
top: 7.17vh;
z-index: 0;
opacity: 1;
}我对代码做了什么？从列表中删除了所有background-color属性，将z-index更改为0 (解决了第一个问题)，并为子菜单中的元素设置了opacity: 0，并在悬停时将其设置为1。
可选:可以将动画更改为ease-in-out，但无论采用哪种方式，效果都很好。
https://stackoverflow.com/questions/50593139
复制相似问题