My Random Thoughts and What Not.

Horizontal Nav with CSS

This is a simple way to achieve a well-designed horizontal navigation menu with a nice hover effect. The design is simple that it requires no element other than the list element.


Like most navigation menus, start by creating an unordered list. We will add a span tag inside of the hyperlink which will provide a brief description for each of the links. The title of each link will be placed within a strong tag.


The styling of the horizontal list consists of nothing special, the only thing to note is specifying a width for the list item so the navigation will be the width of your layout. Other than that we have the top and bottom border and the change in background color for the hover effect.


So there you have it, a simple horizontal navigation menu with CSS. If you have any questions, suggestions, or comments feel free to discuss them below.

View Demo


Malcolm N.

Looks pretty sweet! Cool approach! I’m new to developing and this will work perfectly for a project I’m working on!

akber kabir

hi, it`s so simple, so beautiful..truly appreciateable work ! many thanks for such a nice example. looking forward for more help.


This is great and works well for my site, however I need to be able to center it. I’ve tried everything I can think of (which isn’t much) and I didn’t find much help googling. Do you have a solution? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *