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

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Navigation bar with sub menus html and css only

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">
.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>

Related Tutorials