将侧边栏垂直菜单悬停在引导程序材料设计中显示子菜单

Question

如何在悬停每个菜单时将三列显示为一个子菜单。

＆＃13;

＆＃13;

<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">
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想制作如下图所示的菜单

Answer 1

请参阅下文。希望这会有所帮助。

$('.vertical-nav li a').mouseover(function() {
    $(this).parent().find('.sub-menu').show();
  })
  .mouseout(function() {
    $(this).parent().find('.sub-menu').hide();
  });

.sub-menu {
  display:none;
}
.vertical-nav li, .sub-menu li {
  list-style:none;
}
.column {
  float:left;
  width: 100px;
}
.title {
 padding-bottom: 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>
</div>