COMM 223 - Introduction to Web Site Design and Construction

CSS Cheat Sheet: Menus


A Basic Horizontal CSS Menu

Create a list of your navigation names. Hit "'enter" after each one.

Link them to their pages. Put a title tag into your bulleted links like this for accessibility:

 <li><a href="index.htm" title="Home page">Home</a></li>

Convert the list to an unordered list.

Wrap the list with a <nav> tag. To make the Micro-Clearfix code below work, change the opening <nav> tag by adding a class of cf, like this:

<nav class="cf">

Copy everything below this line of 'X's into your CSS document.

/*The following code prevents problems with the float property we're about to use.*/

/*micro-clearfix by Nicolas Gallagher*/
/* For modern browsers */
.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }
/*Create a background color and size for menu (this will wind up being a colored line at the bottom of the menu*/
nav {
        background: #916A31;
        height: 2.3em;
/*Remove bullets, set margins and display horizontaly*/
ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
/*Optional: create a background color for the menu bar (covers most of the menu)*/
ul {
        background: #D5973C;
        height: 2em;
        width: 100%;
/*Decorate the menu*/
li a {
display: block; line-height: 2em; padding: 0 1em; color: white; text-decoration: none; }
/*Optional: Create roll-over effect*/
li a:hover {
        background: #916A31; /*same as nav background*/
        height: 2em;
        padding-top: .3em;
        position: relative;
        top: -.3em;
        border-radius: .3em .3em 0 0;

/*Optional: Having a menu item (from above menu) indicate the page you are on*/

/*Add the class comment to the menu item on the individual page in question (for instance, on the home page put it in this line)*/
<li><a href="home.htm" title="Home page" class="current">Home</a></li>
/*Then, add this code to the CSS (modify to taste)*/
.current, a:hover.current  {
        background: #AD9B7F;
        color: #eee;
        padding-top: .3em;
        border-radius: .3em .3em 0 0;
        position: relative;
        top: -.3em;
        border-bottom: .3em solid #917F63;
        cursor: default;
/*If you are using different colors you will have to address that in the code above.*/