Responsive dropdown navigation using css flexbox

Description

Demo Code

<html lang="en">
 <head> 
  <title>Dropdown Nav Bar</title> 
  <style>

nav{<!--   ww  w. j  a  v a  2  s  . c  o  m-->
   margin-top:15px
}
nav ul{
   list-style:none;
   position:relative;
   float:left;
   margin:0;
   max-width:700px;
   width:100%;
   background:#28303a;
   height:50px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
}
nav ul a{
   display:block;
   color: #993;
   text-decoration:none;
   font-weight:700;
   font-size:12px;
   line-height:32px;
   padding:0 15px;
   padding:10px;
   border-radius:5px;
   align-self:center;
}
nav ul li{
   position:relative;
   float:left;
   margin:0;
   padding:0
}
nav ul li.current-menu-item{
   background:#ddd
}
nav ul li:hover{
   background: #0093bb;
}
nav ul ul{
   display:none;
   position:absolute;
   top:100%;
   left:0;
   background:#fff;
   padding:0
}
nav ul ul li{
   float:none;
   width:200px
}
nav ul ul a{
   line-height:120%;
   padding:10px 15px
}
nav ul ul ul
{
   top:0;
   left:100%
}
nav ul li:hover > ul
{
   display:block
}

      </style> 
 </head> 
 <body translate="no"> 
  <nav> 
   <ul> 
    <li class="current-menu-item"> <a href="#">Home</a> </li> 
    <li> <a href="#">Themes</a> 
     <ul> 
      <li> <a href="#">Dark</a> </li> 
      <li> <a href="#">Basic Light</a> </li> 
      <li> <a href="#">Playful</a> </li> 
      <li> <a href="#">Elegant</a> </li> 
     </ul> </li> 
    <li> <a href="#">About</a> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Responsive dropdown navigation using css flexbox - HTML CSS CSS Layout

Description

Demo Code

Related Tutorials