Make css menu sub links display vertical rather than horizontal in drop down - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Dropdown

Description

Make css menu sub links display vertical rather than horizontal in drop down

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.vertical-nav {<!--   w w w .  j a  v  a2 s .c o m-->
   height:auto;
   list-style:none;
   width:401px;
   margin:21px 0 0 0;
}

.vertical-nav li {
   height:26px;
   margin:0;
   padding:6px 0;
   background-color:Chartreuse;
   border:none;
   text-align:center;
   display:inline-block;
   float:left;
   width:201px;
}

.vertical-nav li:hover {
   background-color:yellow;
   color:blue;
}

.vertical-nav li a {
   font-family:Calibri, Arial;
   font-size:19px;
   font-weight:bold;
   color:pink;
   text-decoration:none;
}

.vertical-nav li.current {
   background-color:OrangeRed;
}

.vertical-nav li.current a {
   color:grey;
}

vertical-nav ul li ul {
   display:none;
   list-style-type:none;
   width:126px;
   padding:0px;
   margin-top:4px;
   margin-left:-6px;
}

vertical-nav ul li:hover ul {
   display:block;
}

vertical-nav ul li:hover ul li {
   background-color:BlueViolet;
   width:126px;
   height:31px;
   display:inline-block;
}

vertical-nav ul li ul li:hover {
   background-color:Chartreuse;
}

vertical-nav ul li ul li a {
   color:yellow;
   text-decoration:underline;
}

vertical-nav ul li ul li a:hover {
   text-decoration:none;
}

.vertical-nav li ul {
   display:none;
   margin-top:7px;
   padding:0;
}

.vertical-nav li:hover ul {
   display:block;
}
</style> 
 </head> 
 <body> 
  <ul class="vertical-nav"> 
   <li> <a href="index.php">Lore</a> 
    <ul class="sub-menu"> 
     <li> <a href="index.php">Lorem ip</a> </li> 
     <li> <a href="index.php">Lorem ip</a> </li> 
    </ul> </li> 
  </ul>  
 </body>
</html>

Related Tutorials