垂直メニューが

Question

それは私がこの下の画像のようにようにそれを取得したい、今のように

https://jsfiddle.net/nax4ryL1/を取得している

この表形式のサブメニューのようにそれを取得する方法バナー画像の上にあるはずの各垂直メニューをホバーしながら？

<div class="container"> 
     <div class="row"> 
     <div class="col-sm-2"> 
      <ul class="vertical-nav"> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a> 
       <div class='sub-menu'> 
       <ul class="column"> 
        <li class='title'>Style</li> 
        <li><a href="#">Sub Link 1</a></li> 
        <li><a href="#">Sub Link 2</a></li> 
       </ul> 
       <ul class='column'> 
        <li class='title'>Subject</li> 
        <li><a href="#">Sub Link 3</a></li> 
        <li><a href="#">Sub Link 4</a></li> 
       </ul> 
       <ul class='column'> 
        <li class='title'>Medium</li> 
        <li><a href="#">Sub Link 5</a></li> 
        <li><a href="#">Sub Link 6</a></li> 
       </ul> 
       </div> 
      </li> 
      </ul> 
     </div> 
     <div class="col-sm-10"> 
     <img src="images/banner.jpg" class="img-responsive"> 
     </div> 
     </div> 
    </div> 

Answer 1

あなたはZインデックス数値フォーマットで（NOT PX） Zインデックスを設定する必要があります：1。

.sub-menu { 
 
    display:none; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0px; 
 
    width: 320px; 
 
    z-index: 1; 
 

 

 
    background-color: rgb(255, 255, 255); } 
 
.vertical-nav li, .sub-menu li { 
 
    list-style:none; 
 
    position: relative; 
 
    background-color: rgb(255, 255, 255); 
 
} 
 
.vertical-nav li:hover .sub-menu{ 
 
    display: block; 
 
} 
 
.column { 
 
    float:left; 
 
    padding: 0px; 
 
    width: 100px; 
 
} 
 
.title { 
 
padding-bottom: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-2"> 
 
     <ul class="vertical-nav"> 
 
     <li><a href="">Link 1</a></li> 
 
     <li><a href="">Link 2</a> 
 
      <div class='sub-menu'> 
 
      <ul class="column"> 
 
       <li class='title'>Style</li> 
 
       <li><a href="#">Sub Link 1</a></li> 
 
       <li><a href="#">Sub Link 2</a></li> 
 
      </ul> 
 
      <ul class='column'> 
 
       <li class='title'>Subject</li> 
 
       <li><a href="#">Sub Link 3</a></li> 
 
       <li><a href="#">Sub Link 4</a></li> 
 
      </ul> 
 
      <ul class='column'> 
 
       <li class='title'>Medium</li> 
 
       <li><a href="#">Sub Link 5</a></li> 
 
       <li><a href="#">Sub Link 6</a></li> 
 
      </ul> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-sm-10"> 
 
    <img src="https://www.w3schools.com/css/rock600x400.jpg" class="img-responsive"> 
 
    </div> 
 
    </div> 
 
</div>

の