Question

我有一个相当大的导航栏 - 当浏览器调整大小时，它会推送下面的一些列表项，我理解。但是，当您将鼠标悬停在顶行的列表项上时，下拉列表会落在推到第二行的列表项后面。这就是我的意思：

如何让“示例”列表项位于第二行的列表项目上方（本例中为供应商目录和旅游贸易）。这可能是我非常简单的事情在某处失踪。谢谢！

我附加了一个codepen来演示这个问题 - 调整浏览器的大小，使列表项落到下面一行：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: "";
}

Answer 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 */
}

以下是摘录：

＆＃13;

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: "";
}

＆＃13;

<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>

＆＃13;

下拉列表项目高于其他列表项目？

1 个答案: