Jquery 在垂直菜单中，如果将每个菜单悬停，应使用引导材质设计显示三列子菜单 风格 主题 中等

现在越来越像这样了

---

我想让它像下图一样[[1]：

没有必要使用脚本显示/隐藏子菜单。请检查以下代码片段

.col-sm-4{
宽度：25%；
}
.子菜单{
显示：无；
位置：绝对位置；
左：100%；
顶部：0px；
宽度：320px；
}
.垂直导航li..子菜单li{
列表样式：无；
位置：相对位置；
}
.垂直导航李：悬停.子菜单{
显示：块；
}
.栏目{
浮动：左；
填充：0px；
宽度：100px；
}
.头衔{
垫底：10px；
}

风格




主题




中等

对您的代码进行少量更新--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <ul class="vertical-nav">
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a>
              <ul class="sub-menu">
                <div class='column'>
                  <li class='title'>Style</li>
                  <li><a href="#">Sub Link 1</a></li>
                  <li><a href="#">Sub Link 2</a></li>
                </div>
                 <div class='column'>
                  <li class='title'>Subject</li>
                  <li><a href="#">Sub Link 3</a></li>
                  <li><a href="#">Sub Link 4</a></li>
                </div>
                 <div class='column'>
                  <li class='title'>Medium</li>
                  <li><a href="#">Sub Link 5</a></li>
                  <li><a href="#">Sub Link 6</a></li>
                </div>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-8">
      <img src="images/banner.jpg" class="img-responsive">
      </div>

      </div>
    </div>