ドロップダウンメニューのタブが隠れる

Question

ドロップダウンメニューを作っている最中なのですが、不具合が起き、改善する事ができません。

下記にある画像を見ていただくとわかると思いますが、

ドロップダウンメニューのタブの一部がと、スライドショーの下に隠れてしまい、見えないようになってしまっています。

改善するためにしたこと
・cssのz-index:100;をnav2 liに追加。

・プラグイン元のコードと自分のコードを、下に隠れてしまうコードがないかの確認。

どうすれば、ドロップダウンメニューのタブを開いたときに、スライドショーの下に隠れる事なく、上に表示することができるでしょうか？

この問題のわかる方、大変恐縮ですがご教授いただけないでしょうか？

よろしくお願いします。

念の為に、websiteのURLを記載させていただきます。よろしくお願いします。
URL

HTML

  <div class= "header-dash">
    <div class="nav2">
      <li class="part"><a href="#"><img src="box img/header/logo.gif" class="logo" alt=""></a>
        <ul>
          <li><a href="#">b1</a></li>
          <li><a href="#">b1</a>
            <ul>
            <li><a href="#">b2</a></li>
            <li><a href="#">b2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="part"><a href="#"><img src="box img/header/header-1.gif" class="header-1" alt=""></a>
        <ul>
        <li><a href="#">c1</a>
          <ul>
            <li><a href="#">c2</a></li>
            <li><a href="#">c2</a></li>
          </ul>
        </li>
        <li><a href="#">c1</a></li>
        </ul>
      </li>
      <li class="part"><a href="#"><img src="box img/header/header-2.gif" class="header-2" alt=""></a>
        <ul>
          <li><a href="#">d1</a></li>
          <li><a href="#">d1</a>
          <ul>
            <li><a href="#">d2</a></li>
            <li><a href="#">d2</a>
              <ul class="left">
                <li><a href="#">d3</a></li>
                <li><a href="#">d3</a></li>
              </ul>
            </li>
          </ul>
          </li>
        </ul>
      </li>
      <li class="part"><a href="#"><img src="box img/header/header-3.gif" class="header-3" alt=""></a>
        <ul>
        <li><a href="#">e1</a>
          <ul class="left">
          <li><a href="#">e2-1</a></li>
          <li><a href="#">e2-1</a></li>
          </ul>
        </li>
        <li><a href="#">e1</a>
          <ul class="left">
          <li><a href="#">e2-2</a></li>
          <li><a href="#">e2-2</a></li>
          </ul>
        </li>
        </ul>
      </li>
      <li class="part"><a href="#"><img src="box img/header/header-4.gif" class="header-4" alt=""></a>
        <ul>
        <li><a href="#">e1</a>
          <ul class="left">
          <li><a href="#">e2-1</a></li>
          <li><a href="#">e2-1</a></li>
          </ul>
        </li>
        <li><a href="#">e1</a>
          <ul class="left">
          <li><a href="#">e2-2</a></li>
          <li><a href="#">e2-2</a></li>
          </ul>
        </li>
        </ul>
      </li>
    </div>
コード

CSS

.part{
  display:inline-block;
  clear:both;
  width:100%;
}


 .nav2 {
 	width: 750px;
 	height: 150px;
  display:inline-block;
 }
 .nav2 li {
 	position: relative;
 	width: 120px;
 	height: 100px;
 	text-align: center;
 	border-right: 1px solid #fff;
  clear:both;
 }

 .nav2 li:last-child {
 	border-right: none;
 }
 .nav2 li a {
 	display: inline-block;
 	width: 100%;
 	height: 100px;
 	color: #fff;
 	font-size: 14px;
 	line-height: 2.8;
 	transition: 0.5s;
  background: #7FFFD4;
  z-index:100;
 }
 .nav2 li a:hover {
 	color:#fff;
  background: #7FFFD4;
  z-index:100;
 }
 .nav2 > li li:hover > a {
   background: #7FFFD4;
   z-index:100;
 }
 .nav2 li ul {
 	left:0;
 	position:absolute;
 }
 .nav2 li ul li {
 	overflow: hidden;
 	height:0;
 	transition:0.2s;
 }
 .nav2 li ul li a {
 	border-top:1px solid #fff;
 }
 .nav2 li:hover > ul > li {
 	overflow: visible;
 	width:120px;
 	height:100px;
 }
 	.nav2 li ul li ul {/*孫*/
 		top:0;
 		left:109px;
 	}
 	.nav2 li ul li ul:before {/*孫*/
 		position:absolute;
 		content:"";
 		top:15px;
 		left:-10px;
 		border:5px solid transparent;
 		border-left:5px solid #fff;
 	}
 	.nav2 li ul li ul li:hover > a {/*孫*/
    background: #7FFFD4;
 	}
 	.nav2 li ul li ul.left {/*孫*/
 		top: 0;
 		left: -109px;
 		width: 120px;
 	}
 	.nav2 li ul li ul.left:before {/*孫*/
 		position: absolute;
 		content: "";
 		top: 15px;
 		left: 110px;
 		border: 5px solid transparent;
 		border-right: 5px solid #fff;
 	}
 	.nav2 li ul li ul.left li:hover > a {/*孫*/
    background: #7FFFD4;
 	}

コード

Answer 1

スライドが z-index: 999; だから。

.nav2 li ul {
    left: 0;
    position: absolute;
    z-index: 1000;
}

Comments

[revoiot]

ご回答いただきありがとうございます。

無事に、スライドショーの上に表示することができました。

非常に助かりました。ありがとうございました。