hover the sidebar vertical menu display a submenu in bootstrap material design

Question

How to make a display of three columns as one submenu while hovering each menu.

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

I want to make the menu like this below image

Answer 1

Please see below. Hope this helps.

 $('.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>