Majin Planet

How to make a simple Top Menu

In this Tutorial, I’ll show you how to make a simple top menu like the one feature on this web site. Just follow the code examples below. You are welcome to change the code to more your liking. Remember when using display: inline over using a float, you have much more control over the align of the list.

This is light weight and show be easy to add to any web site project.

The CSS Code

#menu_frame{ background: #CCCCCC; color: #000000; padding: 3px; margin: 0; width: auto; height: auto; }
#menu_frame ul{ margin: 0; padding: 0; text-align: center; }
#menu_frame ul li{ padding: 0; margin: 0; list-style: none; display: inline; }
#menu_frame li{ margin-left: 5px; border-left: 1px #999999 solid;}
#menu_frame li a{ padding: 5px; text-decoration: none; color: #666666; }
#menu_frame li a:hover{ text-decoration: none; border-bottom: 2px #000000 solid; color: #000000; }

The HTML

<div id=”menu_frame”>
<ul>
<li><a href=”">Link here</a></li>
<li><a href=”">Link here</a></li>
<li><a href=”">Link here</a></li>
<li><a href=”">Link here</a></li>
<li> </li>
</ul>
</div>

See The Example

If you have any questions or problems using the code please direct your questions to this topic.