放下旋转木马后面的导航栏

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

Answer 1

让它为你工作。问题是你有'＃34;私人服务＆＃34;，＆＃34;服务1＆＃34;和＆＃34;服务2＆＃34;都在同一个导航中。整个导航设置为z-index：1000，这意味着＆＃34;服务＆＃34;以及＆＃34;服务1和2＆＃34;的下拉选项;两者都在同一个z指数中。

此代码设置＆＃34;服务1和服务2＆＃34;更高层而不是＆＃34;私人服务＆＃34;。现在可以查看下拉选项。

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

完整代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;