Make tab style drop down menu - HTML CSS CSS Widget

Description

Make tab style drop down menu
Demo Code

<html lang="en">
 <head> 
  <style>
.nav-container {<!--from  www. j  a v a 2 s.  c  om-->
   float:left;
   display:block;
   width:81%;
   padding-bottom:0;
   border-bottom:2px solid Chartreuse;
   margin:2em;
}

.navigation-menu {
   padding:0.6em 2em 0;
   float:left;
   clear:both;
   margin-bottom:0;
}

.navigation-menu>li {
   float:left;
   display:inline-block;
   margin:0.6em 0.26em 0;
   border-width:3px 3px 0 3px;
   border-style:ridge;
   border-color:yellow;
   border-radius:6px 6px 0 0;
}

.navigation-menu li {
   list-style-type:none;
}

.navigation-menu li a {
   display:inline-block;
   padding:0.6em 2em;
   text-decoration:none;
}

.navigation-menu li ul {
   display:none;
   -webkit-padding-start:0;
}

.navigation-menu ul li a {
   padding:2em;
}

#main {
   clear:left;
}

.navigation-menu li:hover ul {
   display:inline-block;
   position:absolute;
   background-color:blue;
   border:4px ridge pink;
   box-shadow:3px 3px 6px 3px OrangeRed;
   padding:6px;
}

.navigation-menu li ul li a:hover {
   background-color:grey;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="nav-container"> 
   <ul class="navigation-menu"> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem</a> 
     <ul> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem</a> 
     <ul> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem</a> 
     <ul> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem</a> 
     <ul> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
      <li> <a href="#">Lorem ips</a> </li> 
     </ul> </li> 
   </ul> 
  </div> 
  <div id="main"> 
   <h1>Lorem ip</h1> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus a</p> 
   <div class="box contactdetails"> 
    <h2>Lorem ipsum dolor si</h2> 
    <ul> 
     <li>Lorem</li> 
     <li class="last">Lorem ipsu<a href="https://">Lorem ipsum do</a> </li> 
     <li>Lorem ipsum dolor sit amet</li> 
     <li class="last">Lorem ipsum<a href="https://facebook.com">Lorem ipsum </a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>
Make tab style drop down menu - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
