Space to the right of each list element to create menu bar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Space to the right of each list element to create menu bar

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 w w w . ja v  a2 s .co m-->
   position:fixed;
   top:0;
   background-color:Chartreuse;
   height:3.4em;
   width:100%;
   border-bottom-color:yellow;
   border-bottom-style:solid;
}

header .nav-container {
   margin:0 31px;
   height:100%;
   display:block;
   padding:0;
}

header .nav-items {
   float:left;
   margin:0;
   height:100%;
}

.nav-items ul {
   display:inline-table;
   margin:0;
   height:100%;
}

.nav-items ul li {
   display:inherit;
   border-left:2px solid blue;
   height:100%;
   margin:0;
}

.nav-items li ul {
   display:none;
}

.nav-items ul li a {
   display:inherit;
   text-decoration:none;
   color:pink;
   margin:0 auto;
   padding-top:9px;
   white-space:nowrap;
   height:100%;
   width:91px;
   text-align:center;
   vertical-align:middle;
}

.nav-items ul li:hover {
   background:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <header> 
   <div class="nav-container"> 
    <nav class="nav-items" role="navigation"> 
     <ul> 
      <li> <a href="#">Lorem</a> </li> 
      <li> <a href="#">Lorem</a> </li> 
      <li> <a href="#">Lorem</a> </li> 
     </ul> 
    </nav> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials