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

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-index（NOT px） 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>