<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <nav> <div class="vmenu"> <h4><a href="#">Home</a> </h4> </div> <div class="vmenu"> <h4><a href="#">Mobile</a> <ol id="s3"> <li><a href="#">Nokia</a></li> <li><a href="#">Panasonic</a></li> <li><a href="#">Lava</a></li> </ol> </h4> </div> <div class="vmenu"> <h4><a href="#">Fridge</a> <ol id="s4"> <li><a href="#">LG</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">kelvinator</a></li> <li><a href="#">whirlpool</a></li> </ol> </h4> </div> <div class="vmenu"> <h4><a href="#">Contact us</a> </h4> </div> </nav> </div> </div>

* { margin:0px; padding:0px; } nav { width:200px; font-family:arial,georgia,helvetica; line-height:1.5; } .vmenu h4 { background:#fff; width:200px; color:#fff; font-size:large; font-weight:500; padding:7px 15px; background:#a90329; } .vmenu h4 a { text-decoration:none; color:White; width:200px; display:block; } .vmenu h4:hover { background:#cc002c; } .vmenu ol { background:purple; font-size:13px; font-height:30px; list-style-type:none; padding:0px; overflow:hidden; height:0px; transition:height 1s ease; } .vmenu ol a { color:white; text-decoration:none; width:200px; margin-left:50px; font-size:large; height:30px; } .vmenu li { border-bottom:solid 2px #eee; } .vmenu li:hover { background:orange; } .vmenu:hover #s3 { height:93px; } .vmenu:hover #s4 { height:124px; }