Horizontal menu : Navigation Bar : CSS Controls HTML CSS TUTORIALS


HTML CSS TUTORIALS » CSS Controls » Navigation Bar »

 

Horizontal menu


 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
#header {
  float: left;
  width: 100%;
  background-color: white;
  padding-top: 0;
  margin-top: 0;
  background: #ccc;
}

#header h5 {
  display: none;
}

#header ul {
  margin: 0;
  padding: 10px 10px 0;
  list-style: none;
}

#header li {
  float: left;
  margin: 0;
  padding: 0;
}

#header a {
  display: block;
}

#header li {
  float: left;
  background: yellow;
  margin: 0;
  padding: 0;
}

#header a {
  display: block;
  background: gold;
  padding: 5px 15px;
  color: #ccc;
  text-decoration: none;
}

#header #current {
  background: red;
}

#header #current a {
  background: pink;
  color: black;
}
</style>
  </head>
  <body>
  <div id="header">
    <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 id="current"><a href="http://www.navioo.com">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