iNET Interactive - Online Advertising Agency
          
   Home    Authors    About    Login    Contact Us
   Search:   
Advanced Search     
  Articles

  ASP (26)
  ASP.NET (19)
  C and C++ (4)
  CFML (2)
  CGI and Perl (16)
  Flash (2)
  Java (7)
  JavaScript (28)
  PHP (92)
  MySQL (13)
  MSSQL (3)
  HTML (35)
  SEO (9)
  Visual Basic (12)
  CSS (13)
  SSI (5)
  XML (12)
  C# (14)

  Developer News

July 3, 2009
Why Freelancing is Awesome
About
 
July 3, 2009
Twitter spurs Bing and Facebook real-time initiatives
WebDevTips UK
 
July 3, 2009
Maybe ?Paid? Is the Future of Online Business
WebDevTips UK
 
July 3, 2009
Will Microsoft, Google and Amazon talk you out of your datacentre?
WebDevTips UK
 
July 3, 2009
US Couple Gets Prison Time For Internet Obscenity
WebDevTips UK
 
July 3, 2009
Indenting Lists Consistently Across Different Browsers
About
 
Courtesy of moreover.com
 
Want to receive new articles via e-mail? Click here!
/Home /HTML

Tableless rollover navigation bars using XHTML and CSS 

  Views:    12977
  Votes:    12
by Dan Bailey 12/11/03 Rating: 

Synopsis:

Learn how to make a menu bar using a plain unordered list and CSS.
Pages: 
The Article

Firstly we need to create our menu options. We'll put these into a list, and enclose it in a div which we'll call navcontainer.

<div id="navcontainer">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

If you view this in your browser you'll see it's just a standard bulleted list. Pretty boring, so let's add some style.

In your stylesheet, add the following:

#navcontainer ul {
  float:left;
  width:100%;
  margin:0;
  padding:0;
  font-size:11px;
  font-family:verdana, arial, helvetica, sans-serif;
  color:#fff;
  background:#ccc;
  }
#navcontainer ul li {
  display:inline;
  }

I'll explain what we've done.

#navcontainer ul sets styles for the ul contained within the div with the id #navcontainer. We've given it a width of 100% to stretch the bar across the whole width of the div.

#navcontainer ul li applies styles to each list item. Setting it to display:inline and floating the ul to the left will make each list item line up in a horizontal row - exactly what we need for a menu bar.

If you view this, you'll see that it's not very attractive. Let's add some more style.

What we need to do now is add styles to the links themselves. In your CSS add the following:

#navcontainer ul li a {
  float:left;
  padding:5px 10px;
  background:#ccc;
  color:#fff;
  text-decoration:none;
  border-right:1px solid #fff;
  }
#navcontainer ul li a:hover {
  color:#fff;
  background:#69c;
  }

We've added padding to each link to make them more like buttons. Adding border-right:1px solid #fff gives each one a thin white line to the right hand side, emphasising that each one is a button.

Save it and take a look. Success!
Pages: 



 
  Sponsors