liza liza - 1 year ago 143
CSS Question

vertical menu with submenu in bootstrap material design

It is getting like this now

https://jsfiddle.net/nax4ryL1/

I want to get it as like this below image

enter image description here
how to get it like this tabular submenu while hovering each vertical menu which should be above the banner image?

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

You should set z-index in numeric format (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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download