How to Create a Horizontal Menu in CSS

In this article, we will show how you can create your own horizontal menu using CSS, such as the one shown above.

We will go over each and every step to create this horizontal menu so that you can know each and every detail along the way.

Below is the HTML code to create the above horizontal menu. We will then go over what each line of code does:

Lines of Code

<div id="container"><div>- These two lines go around the whole menu item. The menu must be placed inside of a div tag. This div tag acts to create a block, which in this case will represent our horizontal menu. We give this div tag the id container. Of course the name doesn't matter. You can name the id attribute anything you'd like, but be sure that you use the same name that you give it in your HTML page to your CSS page. Again, menus must go inside an overall div tag.
<ul class="menu"></ul>- Next the actual links go into the menu. This can be done by an unordered list placed in between the two <div></div> tags. The unordered list is what allows the individual links to go in. Of course, for the links to go in <li></li> tags must go in between the <ul></ul> tags with the appropriate names.
<li></li> tags- The <li></li> tags must then go in between the unordered list tags. This makes each of the links on the menu bar.

Now that we have all of the HTML code for the page, now we must style the elements which we have created in CSS.

So we go to our CSS page and type in the following lines of code:

#container { width:960px; margin: 0 auto; } .menu { font: 1em Georgia; list-style:none; padding:0; margin:0; background:#fff; border-bottom:3px solid #000; border-top:1px solid #ddd; } .menu li { display:inline-block; padding:5px 15px 4px 15px; } .menu li a { color:#000; text-decoration:none; line-height:1.6em; } .menu li a:hover { color:maroon; }

Lines of Code

#container- Since we named the div tag which represents the horizontal menu bar container, we now reference it as this in the CSS code in order to style it.
width:960px;- We give the container a width of 960px. If you would like to make the width larger, you just have to increase this value. If you would like to make the width shorter, you decrease this value.
margin:0 auto;- This centers the menu bar in the middle of the page, so that the menu bar is centered.
.menu- This section between opening and closing braces styles the menu. In the first line we select the font size and type.
list-style:none- This line removes the bullets from the unordered list.
padding:0- This lines removes the padding that is created by default in an unordered list.
margin:0;- This line removes the margin that is created by default in an unordered list.
background:#fff;- This sets the background of the menu bar to white. So the menu bar will be a white color.
border-bottom:3px solid #000;- This creates a black border of 3px at the bottom of our menu bar.
border-top:1px solid #ddd;- This creates a subtle grayish top border at the top of our menu bar.
.menu li- This is the section of code which styles the links which appear in the menu bar.
display:inline-block;- This line displays all of the links on a single horizontal line. So now instead of the links being vertically stacked, they now are horizontally stacked and, thus, can now appear as a horizontal menu.
padding:5px 15px 4px 15px;- This line gives padding around each of the links in our menu. It gives 5px padding from the top, 15px from the left, 4 px from the bottom, and 15px from the right. This allows the links to be spaced out from each other instead of having no space.
.menu li a- This line allows us to style how the anchor tags look that are displayed in the menu. By default, the anchor tags come underlined and blue in color. By using this line, we can change their appearance to anything we want.
color:#000;- This allows us to change the color of the links in our menu to a black color.
text-decoration:none- This line removes the underline which comes by default with anchor links.
line-height:1.6em;- This line increases the height slightly of the menu bar so that it has more room vertically.
.menu li a:hover- This line allows us to make any changes for when we hover over any of the links in our menu.
color:maroon- This makes the links maroon when we hover over them in the horizontal menu.