Html 在我的示例中，如何修复z索引？
我有一个导航栏，它可以按预期工作，直到我在下拉菜单中添加了一些过渡：它们从导航栏的“上方”滑动，而不是从导航栏下方滑动。我尝试过以各种方式重新分配z索引，但都无济于事。我怎样才能解决这个问题 此外，它还以某种方式影响了语言选择菜单（在右侧）：它的下拉菜单应该右对齐，但不是闪烁（如果您将光标移动到右侧边缘，它会在float:right和float:left之前以某种方式保持切换）编辑：此故障已修复 现在看起来不错。我的HTML：Html 在我的示例中，如何修复z索引？,html,css,z-index,dropdown,Html,Css,Z Index,Dropdown,我有一个导航栏，它可以按预期工作，直到我在下拉菜单中添加了一些过渡：它们从导航栏的“上方”滑动，而不是从导航栏下方滑动。我尝试过以各种方式重新分配z索引，但都无济于事。我怎样才能解决这个问题 此外，它还以某种方式影响了语言选择菜单（在右侧）：它的下拉菜单应该右对齐，但不是闪烁（如果您将光标移动到右侧边缘，它会在float:right和float:left之前以某种方式保持切换）编辑：此故障已修复 现在看起来不错。我的HTML： <!DOCTYPE html> <html la
<!DOCTYPE html>
<html lang="en">
<!-- ########## HEAD ########## -->
<head>
<!-- ########## META ########## -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bla</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/navbar.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>
<body>
<!-- ########## HEADER ########## -->
<header>
<div class="row">
<div class="col-1"><div class="navcont"><span style="visibility: hidden;"> </span></div></div>
<div class="col-10">
<nav id="navmenu">
<ul>
<li class="active"><a href="#"><i class="fa fa-book"></i> <span>Dictionary</span></a></li>
<li><a href="#"><i class="fa fa-key"></i> <span>Grammar</span></a></li>
<li><a href="#"><i class="fa fa-graduation-cap"></i> <span>Learn!</span></a></li>
<li class="has-sub"><a href="#"><i class="fa fa-gamepad"></i> <span>Games</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>Match Words</span></a></li>
<li class="has-sub"><a href="#"><span>Crossword</span></a></li>
<li class="has-sub"><a href="#"><span>Hangman</span></a></li>
<li class="has-sub"><a href="#"><span>Guess!</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><i class="fa fa-wrench"></i> <span>Tools</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>Tool 1</span></a>
</li>
<li class="has-sub"><a href="#"><span>Tool 2</span></a>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-info-circle"></i> <span>About</span> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><span>News</span></a></li>
<li class="has-sub"><a href="#"><span>Guide</span></a></li>
<li class="has-sub"><a href="#"><span>Statistics</span></a></li>
<li class="has-sub"><a href="#"><span>Sources</span></a></li>
<li class="has-sub"><a href="#"><span>Terms of Use</span></a></li>
<li class="has-sub"><a href="#"><span>Contact</span></a></li>
</ul>
</li>
<li class="rightside"><a href="#"><img src="img/flags/en.png" class="langmenu" style="float: left; vertical-align: bottom; padding-top: 3px"> <i class="fas fa-caret-down"></i></a>
<ul>
<li class="has-sub"><a href="#"><img src="img/flags/en.png" class="langmenu"> <span class="langmenu">English</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/fr.png" class="langmenu"> <span class="langmenu">French</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/de.png" class="langmenu"> <span class="langmenu">German</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/ru.png" class="langmenu"> <span class="langmenu">Russian</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/pl.png" class="langmenu"> <span class="langmenu">Polish</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/cz.png" class="langmenu"> <span class="langmenu">Czech</span></a></li>
<li class="has-sub"><a href="#"><img src="img/flags/zh.png" class="langmenu"> <span class="langmenu">Mandarin</span></a></li>
</ul>
</li>
<li class="rightside"><a href="#"><i class="fa fa-user"></i></a></li>
</ul>
</nav>
</div>
<div class="col-1"><div class="navcont"><span style="visibility: hidden;"> XXXXXXXXXXXXXXXX</span></div></div>
</div>
</header>
</body>
</html>
在#导航菜单>ul中使用右：0而不是左：0
#navmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
right: 0;
width: 100%;
/* drop animation 1 */
opacity: 0;
transform: translateY(-5em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
/* --- */
}
在#导航菜单>ul中使用右：0而不是左：0
#navmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
right: 0;
width: 100%;
/* drop animation 1 */
opacity: 0;
transform: translateY(-5em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
/* --- */
}
这是html我实际上提取了它，以便只有lang菜单与右侧对齐，但这是正确的想法，谢谢：）然而，我最关心的是z索引问题，因此不接受is作为答案：（你在找这样的东西吗？几乎完全正确！唯一的问题是橙色的线在下拉列表的顶部…你认为可以做些什么吗？
#navmenu>ulul>a>ul#navmenu>ulul>a>ul#navmenu > ul li a {
position:relative;
background-color: #4889f2;
}
#navmenu > ul ul {
z-index: 0;
}