jquery - Bootstrap Material 设计中带有子菜单的垂直菜单

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(不是像素)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>