Hover Over Menu Simple CSS Tutorial

It’s quite amazing how elegant a simple CSS hover over menu makes your website. There are many types of feature rich hover overs and drop down menus which help spice up your web designs. I personally feel a website is not finished if it doesn’t use a hover over in its navigation bar.

In this tutorial I will be showing you how to create your own simple CSS hover over menu which you can use on your own website or maybe for a future clients website.

The great thing about this hover over menu is that the colours can be easily adjusted to match any type of website theme. All you need to do is change the hexadecimal colour code (#000000) or change the background image depending on which method you use.

Before we start, I am going to assume you have a basic understanding of HTML and CSS, if not you will still be able to follow along as this tutorial is very easy, but you may not understand what the code is doing, I will do my best to explain the important parts.

Hover Over Menu Tutorial

What We Are Going To Create.

Lets take a look at the live demo of our simple CSS hover over menu.

As you can see the hover over is very simple, but simple works well. You can add your own creative background images to make it look better or you change the colour codes. As long as the images match the correct width and height of the hover over and the navigation bar.

Step 1. HTML

First we want to create the DIVS for the navigation and the links.

Copy the following code into your HTML document.


<div id="navigation">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Contact</a></li>		
</ul>
       </div>
		  </div>

Here you have assigned an ID for the navigation (the horizontal bar) and the menus. Now we are going to assign each of these styles using CSS.

Step 2. CSS

Copy and paste the following code into your style sheet.

#navigation 
{
display: inline-block; 
width: 100%; 
height: 64px;
background-color: #E5E5E5; 
border-bottom: 2px solid #014b67;
border-top: 2px solid #014b67;
}

ul { 
margin: 0;
padding: 0;
}

#menu { 
text-align: center; 
} 

#menu ul { 
line-height: 63px;
list-style: none outside none;
}

#menu li 
{
display: inline;  
} 

#menu li a 
{ 
color: #666;
padding: 24px; 
text-decoration: none; 
font-family: Arial, sans-serif; 
}

#menu li a:hover 
{ 
background-color: #014B67; 
color: #fff; 
}

There you have your simple CSS hover over menu. Here is a brief breakdown of some of the important parts of the code.

#navigation – This creates the bar which stretches across the screen with “width: 100%;” the “background-color: #E5E5E5;” is where you enter in your colour code. You could also replace this with “background-image: url(…/images/yourimage.jpg” and this would replace the background color with your own image.

#menu ul – “line-height: 63px;” is an important element, match the line height with the navigation height or so it lines up correctly. If you use your inspect element and cancel off the line height element you will see the list jump and the hover over unaligned. You use line-height to align the list.

#menu li – “display: inline;” displays your list of links horizontally instead of vertically which is the default.

#menu li a – “padding: 24px;” This is where you would add the padding around your links to create the large square hover over effect that matches the height of your navigation. I have also used this to choose my font-size, font-family and text-decoration.

#menu li a:hover – Last but not least, this is where you would adjust your hover effect colours or choose a background image.

Now you have yourself a simple CSS hover over menu. I have tried my best to explain this tutorial in as much detail as I could. If you feel I have missed anything or not mentioned something you think is important. Please let me know and I will try to explain.

Thanks for reading!

Author: Jake

Share This Post On
  • David Susen

    ty Jake, I needed something simple to get my feet wet :) Most examples look great but they are way too complex. Experts succumb to the “look how cool this looks” – and it does but for us learners we need simple in order to absorb the concepts.

    • http://www.develop-a-website.com/ Jake

      Hey David, I’m glad this was useful to you. I always feel simple is better. Thanks for the feedback.

      • David Susen

        np Jake …. any chance for sub menus? Because you did not include sub menu’s with your I’m trying to merge a similar tutorial with yours and it’s not pretty |8o) … The other tutorial includes no css explanation and your colors are great. Again, I want simple because I’m just learning css and the complex example put me in a box I can’t get out of. Simple means I can take it and tweek it to my likeing. Thanks again.