CSS tab based navigational bar : Navigation Bar : CSS Controls HTML CSS TUTORIALS


HTML CSS TUTORIALS » CSS Controls » Navigation Bar »

 

CSS tab based navigational bar


 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
#navsite h5 {
  display: none;
}

#navsite ul {
  padding: 3px 0;
  margin-left: 0;
  border-bottom: 1px solid #669;
}

#navsite ul li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navsite ul li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #669;
  border-bottom: none;
  background: #ccf;
  text-decoration: none;
}

#navsite ul li a:link {
  color: #339;
}

#navsite ul li a:visited {
  color: #666;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
  color: #000;
  background: #AAE;
  border-color: #336;
}

#navsite ul li a#current {
  background: white;
  border-bottom: 1px solid white;
}
    </style>
  </head>
  <body>
  <div id="navsite">
  <ul>
   <li><a href="http://www.navioo.com">Home</a></li>
   <li><a href="http://www.navioo.com">Home</a></li>
   <li><a href="http://www.navioo.com">Home</a></li>
    <li><a href="http://www.navioo.com">Home</a></li>
   <li><a href="http://www.navioo.com" id="current">Home</a></li>
   <li><a href="http://www.navioo.com">Home</a></li>
  </ul>
  </div>
  </body>
 </html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo CSS Controls
» Navigation Bar