Horizontal justified menu in CSS with bar in space - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Horizontal justified menu in CSS with bar in space

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">
#navigation {<!--from  w  ww . j  ava2  s  . c o m-->
   text-align:justify;
}

#navigation ul span {
   display:inline-block;
   position:relative;
   width:100%;
   height:0;
}

#navigation ul {
   display:inline;
   list-style:none;
}

#navigation ul li {
   float:left;
   text-align:center;
}

#navigation ul li a {
   display:inline;
   border-right:2px solid Chartreuse;
   padding-right:6px;
   padding-left:6px;
}

#navigation ul li.last a {
   border-right:none;
}
</style> 
 </head> 
 <body> 
  <div id="navigation"> 
   <ul class="navigation"> 
    <li class="first"> <a href="#" title="Home Page">Lore</a> </li> 
    <li> <a href="#">Lorem ip</a> </li> 
    <li> <a href="#">Lorem ipsum d</a> </li> 
    <li> <a href="#">Lorem ipsum dolor s</a> </li> 
    <li> <a href="#">Lorem ipsu</a> </li> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem ipsu</a> </li> 
    <span></span> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials