在垂直菜单中，如果我悬停每个菜单，应使用bootstrap材质设计显示三列子菜单 [英] in a vertical menu, if i hover each menu three columns of submenus should display using bootstrap material design

问题描述

 < 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 =>连结1< / a>< / li> 
< li>< a href =>连结2< / a> 
< ul class =sub-menu> 
< div class ='column'> 
< li class ='title'>风格< / li> 
< li>< a href =＃>子链接1< / a>< / li> 
< li>< a href =＃> Sub Link 2< / a>< / li> 
< / div> 
< div class ='column'> 
< li class ='title'>主题< / li> 
< li>< a href =＃>子链接3< / a>< / li> 
< li>< a href =＃> Sub Link 4< / a>< / li> 
< / div> 
< div class ='column'> 
< li class ='title'>中< / li> 
< li>< a href =＃> Sub Link 5< / a>< / li> 
< li>< a href =＃>子链接6< / a>< / li> 
< / div> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< div class =col-sm-8> 
< img src =images / banner.jpgclass =img-responsive> 
< / div> 
 
< / div> 
< / div> 
  

现在变得像这样 https://jsfiddle.net/k8wczzvd/

我希望像这张图片一样[[1] ： https://i.stack.imgur.com/dZh6X.jpg[1]

解决方案

没有必要 show / hide 子菜单使用脚本。检查下面的代码片段。

.col-sm-4 {width： 25％;}。子菜单{display：none;位置：绝对;左：100％; top：0px; width：320px;}。vertical-nav li，.sub-menu li {list-style：none; position：relative;}。vertical-nav li：hover .sub-menu {display：block;}。column {float：left; padding：0px;标题{padding-bottom：10px;}

< div class =container> < div class =row> < div class =col-sm-4> < ul class =vertical-nav> < li>< a href =>连结1< / a>< / li> < li>< a href =>连结2< / a> < div class ='sub-menu'> < ul class =column> < li class ='title'>风格< / li> < li>< a href =＃>子链接1< / a>< / li> < li>< a href =＃> Sub Link 2< / a>< / li> < / UL> < ul class ='column'> < li class ='title'>主题< / li> < li>< a href =＃> Sub Link 3< / a>< / li> < li>< a href =＃> Sub Link 4< / a>< / li> < / UL> < ul class ='column'> < li class ='title'>中< / li> < li>< a href =＃>子链接5< / a>< / li> < li>< a href =＃>子链接6< / a>< / li> < / UL> < / DIV> < /锂> < / UL> < / DIV> < / div>< / div>

<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>

it is getting like this now https://jsfiddle.net/k8wczzvd/

I want to get it as like this image[[1]: https://i.stack.imgur.com/dZh6X.jpg[1]

解决方案

There is no need to show/hide submenu using script. Check following snippet for this.

.col-sm-4 {
  width: 25%;
}
.sub-menu {
  display:none;
  position: absolute;
  left: 100%;
  top: 0px;
  width: 320px;
}
.vertical-nav li, .sub-menu li {
  list-style:none;
  position: relative;
}
.vertical-nav li:hover .sub-menu{
  display: block;
}
.column {
  float:left;
  padding: 0px;
  width: 100px;
}
.title {
 padding-bottom: 10px;
}

<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>
            <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>
</div>

这篇关于在垂直菜单中，如果我悬停每个菜单，应使用bootstrap材质设计显示三列子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！