Navigation bar with sub menus html and css only

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.header {<!--from   ww w .j ava  2  s.  co  m-->
   background-color:Chartreuse;
   padding:16px;
   margin:0;
   min-height:126px;
   top:0;
   left:0;
}

.header nav.site_nav {
   float:right;
}

.header ul {
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
}

.header ul a {
   display:block;
   font-weight:bold;
   color:yellow;
   font-size:15px;
   text-decoration:none;
   padding:9px 9px 9px 9px;
}

.header ul a:hover {
   color:blue;
}

.header ul li {
   float:left;
   position:relative;
   margin:0 3px 0 3px;
}

.header ul li:hover {
   background:pink;
}

.header ul li:hover a.topLevel {
   color:OrangeRed;
}

.header ul ul {
   display:none;
   position:absolute;
   text-align:right;
   top:100%;
   right:0;
}

.header ul ul li {
   float:none;
   width:151px;
   background:grey;
   margin:0;
}

.header ul li:hover>ul {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div class="header"> 
   <nav class="site_nav"> 
    <ul> 
     <li> <a class="topLevel" href="#">Lorem ips</a> 
      <ul> 
       <li> <a href="courses.html">Lorem ipsum</a> </li> 
       <li> <a href="upcomingcourses.html">Lorem ipsum dolo</a> </li> 
      </ul> </li> 
     <li> <a class="topLevel" href="#">Lorem ipsu</a> 
      <ul> 
       <li> <a href="whychooseus.html">Lorem ipsum d</a> </li> 
       <li> <a href="meettheteam.html">Lorem ipsum d</a> </li> 
      </ul> </li> 
     <li> <a class="topLevel" href="contact.html">Lorem ipsu</a> </li> 
    </ul> 
   </nav> 
  </div>  
 </body>
</html>

Navigation bar with sub menus html and css only - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials