带有自举材料设计子菜单的垂直菜单

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

您应该以数字格式（NOT px）设置z-index。z-index：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>