How to Create Simple Horizontal Menu using CSS

Initially, we were talking about the CSS vertical menu. As creating a vertical menu has been much easier, we will today go and design for a horizontal menu which can run across the website. The horizontal menu as I’ve said earlier is the most preferred menu for navigating the website. If you are a web designer, then it is necessary and compulsory that you should have a menu/navigation for your website. This not only enables the users on easy navigation but also the web crawlers.

We will implement simple “HTML list structure” to produce the menu links in this demo and then style upon them using CSS.

DEMO | DOWNLOAD

OBJECTIVE OF THE TUTORIAL

1) Create a simple horizontal menu using CSS.

2) Style the menu list elements using only CSS.

Explanation

The code for this simple horizontal menu using only CSS is very very simple.

Here is the HTML markup I’ve used using the HTML list structure:

HTML Markup:

The above HTML markup would looks like this without any styles:

We need to style these tags using the following CSS:

CSS:

We first start by defining a width of 525px for the menu and a surrounding margin of 20px. We also remove those default list styles by the code

We give the links on the list elements using the following code:

We also give a hover status of the links. We have tested this on all the major browsers like Chrome, Firefox and IEs. These are just working fine on all these browsers.

DEMO | DOWNLOAD

In our next mission, we shall discuss how to create a menu with multi-level drop down features. Enjoy this menu and please share your feedbacks below.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...