其他列表项上方的下拉列表项？

Posted 2023-04-13

【中文标题】其他列表项上方的下拉列表项？

【英文标题】：Dropdown list items above other list items?

【发布时间】：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 &amp; Entertainments +</label>
      <a href="#">Attractions &amp; 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 &amp; Events +</label>
      <a href="#">Conference, Meetings &amp; 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: "";

【参考方案1】：

在css中，去掉z-index:50;这一行，就可以了。

nav ul li 
  margin: 0px;
  display: inline-block;
  background-color: #3c3c3b;
  text-align: center;
  position: relative;
  z-index: 50; /* <---------------THIS LINE HERE, REMOVED */

这里是sn-p：

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;


/* 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: "";

<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 &amp; Entertainments +</label>
      <a href="#">Attractions &amp; 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 &amp; Events +</label>
      <a href="#">Conference, Meetings &amp; 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>