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.
HTML
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.
|
1 2 3 4 5 6 7 8 |
<ul id="topnav"> <li><a href="#"><strong>Home</strong> Welcome</a></li> <li><a href="#"><strong>About</strong> Who we are</a></li> <li><a href="#"><strong>Services</strong> What we do</a></li> <li><a href="#"><strong>Portfolio</strong> See our work</a></li> <li><a href="#"><strong>Blog</strong> Site updates</a></li> <li><a href="#"><strong>Contact</strong> Give us feedback</a></li> </ul> |
CSS
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
ul#topnav { font: normal 14px Arial, Helvetica, sans-serif; list-style: none; margin: 0; padding: 0; } ul#topnav li a { background: #f2f2f2; border-bottom: 1px solid #b5b7b9; border-top: 5px solid #2c3035; color: #c5c6c7; float: left; font-style: italic; padding: 7px 0 10px 10px; text-decoration: none; width: 155px; } ul#topnav li a strong { color: #2c3035; display: block; font-style: normal; padding: 0 0 3px 0; } ul#topnav li a:hover { background: #ececed; border-bottom: 1px solid #42b3e7; border-top: 5px solid #42b3e7; color: #42b3e7; } |
Result
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.
3 Comments
Looks pretty sweet! Cool approach! I’m new to developing and this will work perfectly for a project I’m working on!
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!