CSS Horizontal Navigation

I know that I once stated that using UL to build a list of links was not desirable, but there are times when you have no choice.

It is fairly straightforward and you do not need any JavaScript to ruin your code.  So let's get started an define the menu and wrap it inside a DIV:

<div id="hovermenu">
  <ul>
        <li><a href="#" href="Link Number 1">Link #1</a></li>
        <li><a href="#" href="Link Number 2">Link #2</a></li>
        <li><a href="#" href="Link Number 3">Link #3</a></li>
    </ul>
</div>

Now for the CSS:

.hovermenu ul{
  font: bold 13px arial;
  padding-left: 0;
  margin-left: 0;
  height: 40px;
}

.hovermenu ul li{
  list-style: none;
  display: inline;
}

.hovermenu ul li a{
  padding: 2px 0.5em;
  padding:7px;
  text-decoration: none;
  float: left;
  color: black;
  background-color: #92b9ee;
  border: 2px solid #FFF2BF;
  height:40px; /* Make this match the UL height for larger sizes */
}

.hovermenu ul li a:hover{
  background-color: #FFE271;
  border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
  border-style: inset;
}

Voila! You have a rollover horizontal menu.  Just change the styling and the colours to fit your needs.  This code can be easily adapted for images.

Blogged with Flock