我有一个按预期工作的导航栏，直到我添加了从this example到我的下拉菜单的一些过渡：它们从＆＃34;滑过＆＃34;导航栏而不是从导航栏下面。我尝试以各种方式重新分配z-index无济于事。我该如何解决这个问题？
此外，它还影响了语言选择菜单（右侧）：它的下拉列表应该对齐，但不是它的故障（如果你将光标移动到右边缘，它在浮动之前保持切换：右边和浮动：左边，不知何故）。 编辑：这个故障是固定的。
现在看起来like that。我的HTML：
<!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>
和CSS：
@charset "UTF-8";
#navmenu > ul,
#navmenu > ul li,
#navmenu > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#navmenu > ul {
position: relative;
z-index: 2;
}
#navmenu > ul li {
float: left;
line-height: 1.3em;
vertical-align: middle;
z-index: -20;
}
#navmenu > ul li.hover,
#navmenu > ul li:hover {
position: relative;
z-index: 4;
cursor: default;
}
#navmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 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;
/* --- */
}
#navmenu > ul ul li {
float: none;
}
#navmenu > ul ul ul {
top: 1px;
left: 99%;
z-index: -20;
}
#navmenu > ul li:hover > ul {
visibility: visible;
/* drop animation 2 */
opacity: 1;
z-index: -2;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
/* --- */
}
#navmenu > ul > li.last ul ul {
left: auto !important;
right: 99%;
}
#navmenu > ul > li.last ul {
left: auto;
right: 0;
}
#navmenu > ul > li.last {
text-align: right;
}
/* Theme Styles */
#navmenu > ul {
border-bottom: 4px solid #ed7512;
font-size: 1.2em;
background: #4889f2;
width: auto;
}
#navmenu > ul:before {
content: '';
display: block;
}
#navmenu > ul:after {
content: '';
display: table;
clear: both;
}
#navmenu > ul li a {
display: inline-block;
padding: 0.7em 1em;
}
#navmenu > ul > li.active {
background-color: #ed7a1c;
}
#navmenu > ul > li.active:hover {
background-color: #cc6918;
}
#navmenu > ul > li > a:link,
#navmenu > ul > li > a:active,
#navmenu > ul > li > a:visited {
color: #ffffff;
}
#navmenu > ul > li > a:hover {
color: #ffffff;
}
#navmenu > ul ul ul {
top: 0;
}
#navmenu > ul li li {
background-color: #4889f2;
border-bottom: 1px solid #ebebeb;
font-size: 1.0em;
}
#navmenu > ul li.hover,
#navmenu > ul li:hover {
background-color: #1556bf;
}
#navmenu > ul > li.hover,
#navmenu > ul > li:hover {
background-color: #1556bf;
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
transition: all 0.3s ease-in-out;
}
#navmenu > ul a:link,
#navmenu > ul a:visited {
color: #ffffff;
text-decoration: none;
}
#navmenu > ul a:hover {
color: #ffffff;
}
#navmenu > ul a:active {
color: #ffffff;
}
#navmenu > ul ul {
border: 1px solid #CCC \9;
-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
width: 150px;
}
#navmenu a, #navmenu li, #navmenu li ul {
width: auto;
}
#navmenu li {
position: relative;
}
#navmenu li li {
white-space: nowrap;
}
#navmenu li ul {
min-width: 100%;
}
.langmenu {
vertical-align: middle;
display: inline-block;
position: relative;
}
#navmenu li.rightside:hover ul{
left:auto;
right:0;
}
.rightside {
float: right !important;
}
/* left and right navbar continuation */
.navcont {
border-bottom: 4px solid #ed7512;
line-height: 1.25em;
background: #4889f2;
width: 100%;
padding: 1em 1em;
font-family: inherit;
}
@charset "UTF-8";
/* allows using FontAwesome in CSS "content" */
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
body {
background-color: ivory;
margin: 0px;
padding: 0px;
font-family: Calibri, Tahoma, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 0px;
border: none;
}
.row::after {
content: "";
clear: both;
display: table;
}
.spacer {
height: 1em;
width: 100%;
display: block;
}
.sidemargin {
visibility: hidden;
}
[1]: https://codepen.io/shshaw/pen/gsFch
[2]: https://codepen.io/iyoossaev/pen/mXgpQg
答案 0 :(得分：1)
在#navmenu＆gt;中使用右：0而不是左：0 ul ul
#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;
/* --- */
}