Question

我的导航栏有问题当我使用bx-slider时，导航栏位于后面，我无法点击链接。
导航栏位于滑块后面我想解决这个问题。

这是我的代码：

＆＃13;

*{margin: 0;padding: 0;}
/* Start Navigation Bar */
.mainNav{
    height: 0;
}
.mainNav .logo{
    float: left;
}
.mainNav .myUl{
    float: right;
    z-index:99;
}
.mainNav .items{
    display: inline-block;
    /*margin: 30px 30PX 0 30PX;*/
    font-size: 20px;
}
/* End Navigation Bar */
/* -------------------------- */
/* Start Header */
.mainHeader{
    background-image: url('../images/1.jpg');
}
.mainHeader .bx-wrapper{
    height: 100%;
    z-index:1;
}
.mainHeader .bx-wrapper .bx-viewport{
    height: 100% !important;
    box-shadow: none;
    border: 0;
    background: none;
    z-index:1;
}
/* End Header */

＆＃13;

  <body>
<!-- Start Navigation Bar -->
<nav class="mainNav">
  <div class="container">
    <h2 class="logo">Hello Otaku</h2>
    <ul class="myUl">
      <li class="items"><a href="#">HOME</a></li>
      <li class="items"><a href="#">HOME</a></li>
      <li class="items"><a href="#">HOME</a></li>
      <li class="items"><a href="#">HOME</a></li>
      <li class="items"><a href="#">HOME</a></li>
    </ul>
  </div>
</nav>
<!-- End Navigation Bar -->
<!-- Start Header -->
<div class="mainHeader">
  <ul class="bxslider">
    <li><h3>Hello World</h3><br/><p>HAHAHAHAHAHAHHAHAHAHAHHA</p></li>
    <li><h3>Hello World</h3><br/><p>HAHAHAHAHAHAHHAHAHAHAHHA</p></li>
    <li><h3>Hello World</h3><br/><p>HAHAHAHAHAHAHHAHAHAHAHHA</p></li>
    <li><h3>Hello World</h3><br/><p>HAHAHAHAHAHAHHAHAHAHAHHA</p></li>
  </ul>
</div>

＆＃13;

固定滑块和导航栏

0 个答案: