Creating an inline menu should seem pretty straight forward, right? You think we could just create an unordered list and that would be the end of the story. Unfortunately, if we create an unordered list we'll quickly see that these lists types merely list item one on top of the other.

  • Item 1
  • Item 2
  • Item 3

This is because the ul and li elements are block-level elements and not inline elements. For example:

ul, li {display:block;}

Is a piece of code that is understood by every modern browser that follows the W3C standards.

Our solution is simple then. If we recall that an inline display value will use only what is immediately around the element. Consider the following:

p.inline {display:inline;}
<p class="inline">Porttitor eros dictumst nunc lundium porta proin 
ultrices placerat velit ultrices parturient tincidunt? 
In. Nisi tincidunt scelerisque cras velit sed risus 
arcu turpis! Mauris et.</p>
<p class="inline">Et ac. Nec tortor quis pulvinar tristique augue 
dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? 
Amet proin, nascetur amet et eu diam.</p>

Since we overrode the default display:block; for p elements, the output will be the following:

Porttitor eros dictumst nunc lundium porta proin ultrices placerat velit ultrices parturient tincidunt? In. Nisi tincidunt scelerisque cras velit sed risus arcu turpis! Mauris et.

Et ac. Nec tortor quis pulvinar tristique augue dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? Amet proin, nascetur amet et eu diam.

So let us examine the list a little bit more.

<ul>
     <li><a href="#">Item 1</a></li>
     <li><span>Item 2</span></li>
     <li><em>Item 3</em></li>
</ul>

The <ul> in itself if a block-level element; however, the <li> are also block-level elements. All of the elements surrounding the list items are inline elementse.g. the <a> is an inline element.

In our inline menu, we don't want the menu itself to be an inline element but rather its items to be inline elements. These items are the <li> elements. Consider the following menu with basic CSS:

#menu {
     height:50px; /*sets height of menu*/
     background-color:#4c4c4c;
}

#menu ul {
    list-style:none; /*gets rid of bullets*/
     width:800px; /*sets width of menu, not necessary*/
}

#menu li {
     display:inline; /*critical to inline menu*/
     padding-left:10px; /*sets space between menu items*/
}

Now that we have our CSS the HTML structure will look like the following:

<div id="menu">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
     </ul>
</div>

See the downloadable file for working example and additional examples.

Pretty boring, huh? All of that CSS for just a few lines of lousy HTML. This is a secret behind the creation of inline CSS menus, just remember that you want the menu items to be a series of inline elements but not the actual menu itself.

From here on out we can style our inline menu to our liking. If you are unfamiliar with CSS then I recommend you visit the CSS Tutorials and learn CSS!

From there we can style our inline menu to our liking. We can create simple effects that will make the men stand out. Consider the following:

#menu {
     height:50px;
     font-size:1.2em;
     background-color:#4c4c4c;
     border:2px solid #fff;
     color:#fff;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding-left:10px;
}

#menu a:link, #menu a:visited {
     text-decoration:none;
     color:#fff;
     padding:10px;
}

#menu a:hover {
     background-color:#3b3b3b;
     text-decoration:none;
     color:#DBDBDB;
     padding:10px;
}

This will give us a nice looking menu that will have a roll over effect on the links within the menu. From there, we can add custom images, jQuery drop down menus, and many other effects using client-side code.

For examples and editable code, please download the file!

Inline Menu
Inline Menu
Size: 11.48 KB