html - 下拉轮播后面的导航栏

Question

旋转木马后面的导航栏出现问题。我知道这是重复的，我似乎无法找到解决问题的方法。我厌倦了使用 z-index: 1000 没有运气。我为上述问题添加了 html 和 css 文件。你还想要什么 ttt frooom meeee。

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}


/* Unordered list*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Header **/

header {
  opacity: .8;
  background-color: #000;
  max-height: 55px;
}


/* list items */

header li {
  float: left;
  color: blue;
  padding: 10px 10px 0 10px;
  text-align: center;
}

.nav-items ul li ul li {
  float: none;
}

.nav-items ul li ul {
  position: absolute;
  z-index: 1000;
  visibility: visible;
}

.nav-items a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}

header a:hover {
  background-color: red;
}

header ul li:hover ul li {
  display: block;
}

header ul li ul li {
  display: none;
}

header #branding {
  float: left;
  padding-right: 50px;
}

header #branding h2 {
  margin: 0;
  color: #fff
}

header .highlight {
  color: #99c2ff;
  font-weight: bold;
}

header .action-items {
  float: right;
}


/* Carousel css file */

.carousel-inner img {
  margin: 0 auto;
  display: block;
}

<header>

  <div class="container">

    <div id="branding">
      <h2><span class="highlight">Connect</span>Us</h2>
    </div>

    <nav class="nav-items">
      <ul>
        <li><a href="index.html">Private Services</a>
          <ul>
            <li><a> Service 1 </a></li>
            <li><a> Service 2 </a></li>
          </ul>
        </li>
        <li><a href="index.html">Assesment</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <nav class="action-items">
      <ul>
        <li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
        <li><i class="fa fa-search" aria-hidden="true"></i></li>
      </ul>
    </nav>

  </div>
</header>

This is the html file above

Answer 1

让它为你工作。问题是您在同一个导航栏中有“私有(private)服务”、“服务 1”和“服务 2”。整个导航设置为 z-index:1000，这意味着“服务”以及“服务 1 和 2”的下拉选项都在同一个 z-index 中。

此代码将“服务 1 和服务 2”设置为比“私有(private)服务”更高的层。下拉选项现在可见。

  .dd {
position: absolute;
  z-index: 100111;
  visibility: visible;
  }

-

 <nav class="nav-items">
      <ul>
        <li><a href="index.html">Private Services</a><dropdown class="dd">
          <ul>
            <li><a> Service 1 </a></li>
            <li><a> Service 2 </a></li>
            </ul></dropdown>

完整代码:

<style>/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}


/* Unordered list*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Header **/

header {
  opacity: .8;
  background-color: #000;
  max-height: 55px;
}


/* list items */

header li {
  float: left;
  color: blue;
  padding: 10px 10px 0 10px;
  text-align: center;
}

.nav-items ul li ul li {
  float: none;
}

.nav-items ul li ul {
  position: absolute;
  z-index: 1000;
  visibility: visible;
}
  .dd {
position: absolute;
  z-index: 100111;
  visibility: visible;
  }
  
.nav-items a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}

header a:hover {
  background-color: red;
}

header ul li:hover ul li {
  display: block;
}

header ul li ul li {
  display: none;
}

header #branding {
  float: left;
  padding-right: 50px;
}

header #branding h2 {
  margin: 0;
  color: #fff
}

header .highlight {
  color: #99c2ff;
  font-weight: bold;
}

header .action-items {
  float: right;
}


/* Carousel css file */

.carousel-inner img {
  margin: 0 auto;
  display: block;
}</style>
<header>

  <div class="container">

    <div id="branding">
      <h2><span class="highlight">Connect</span>Us</h2>
    </div>

  <nav class="nav-items">
      <ul>
        <li><a href="index.html">Private Services</a><dropdown class="dd">
          <ul>
            <li><a> Service 1 </a></li>
            <li><a> Service 2 </a></li>
            </ul></dropdown>
        </li>
        <li><a href="index.html">Assesment</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <nav class="action-items">
      <ul>
        <li><i class="fa fa-user-circle-o" aria-hidden="true"></i></li>
        <li><i class="fa fa-search" aria-hidden="true"></i></li>
      </ul>
    </nav>

  </div>
</header>