【发布时间】：2018-07-15 05:56:20
【问题描述】：
我有一个相当大的导航栏 - 当浏览器调整大小时，它会在下面推送一些列表项，我理解。但是，当您将鼠标悬停在顶行的列表项上时，下拉列表会落在被推到第二行的列表项之后。这就是我的意思：
我怎样才能让“示例”列表项位于第二行的列表项之上（在本例中为供应商目录和旅游贸易）。这可能是一件非常简单的事情某处失踪。谢谢！
我也附上了一个代码笔来演示这个问题 - 调整浏览器的大小，使列表项落在下面的行：https://codepen.io/Macast/pen/jZrObb
HTML：
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="home.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Attractions & Entertainments +</label>
<a href="#">Attractions & Entertainments</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Conference, Meetings & Events +</label>
<a href="#">Conference, Meetings & Events</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Accommodation +</label>
<a href="#">Accomodation</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
<li><a href="#">Supplier Directory</a></li>
<li><a href="#">Travel Trade</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Additional Support</a></li>
</ul>
</nav>
CSS：
html,
body {
height: 100%;
width: 100%;
font-family: "Helvetica Neue Bold", "Arial Bold", sans-serif;
margin: 0;
}
/* Navigation Bar */
.toggle,
[id^="drop"] {
display: none;
}
/* Giving a background-color to the nav container */
nav {
margin: 0;
padding: 0;
background-color: #3c3c3b;
}
/* Since we'll have the "ul li" "float: left", we need to add a clear after the container */
nav: after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul", and adding "position: relative" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
z-index: 50; /* Link items will stay above all other content, e.g. Maps */
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 12pt;
text-decoration: none;
text-align: center;
}
/* Background colour change on hover */
nav a:hover {
background-color: #000000;
}
nav ul li ul li:hover {
background: #000000;
}
/* Hide dropdowns by default and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* Had to be the same number as the "line-height" of "nav a" */
/*top: 60px;*/
left: 0;
right: 0;
}
/* Display dropdowns on hover */
nav ul li:hover > ul,
nav ul li:focus > ul {
display: inherit;
}
/* First Tier Dropdowns */
nav ul ul li {
float: none;
display: list-item;
position: relative;
text-align: center;
z-index: 100;
}
/* Second, Third and more Tier Dropdowns */
/* We move the 2nd and 3rd etc tier dropdowns to the left by the amount of the width of the first tier */
nav ul ul ul li {
position: relative;
/*top: -60px;*/
/* Has to be the same number as the "width" of "nav ul ul li" */
left: 200px;
}
/* Change ' +' in order to change the dropdown symbol */
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}
【问题讨论】：
标签： html css drop-down-menu navigation navbar