CSS Rollover Menu Tutorial

Hello everyone, I am sure you all know what a CSS Rollover Menu is but do you know how to hand code one yourself? Most do not and they use a auto program but what they don’t understand is that those programs often times code for older standards and or have messed up coding and people don’t know how to hand correct those problems for a working menu.

With that said today you can remove those auto programs from your computer because I am going to show you how to hand code the CSS Rollover Menu from scratch! If you don’t want to read this how-to and would rather just get a working menu that you can mess with, at the end of this tutorial is a place you can download the work files for this tutorial and experiment with them on your own, however I suggest you read this tutorial if you really want to learn! Its not that hard and you will thank yourself later on!

Tutorial Name: CSS Rollover Menu
Software Needed: Notepad But I recommend the free Edit Pad Pro program myself!
Skill Level: Basic HTML / CSS

To start you will need to know some basic HTML, nothing to advanced here but we want to create a basic bullets list and ensure the text from each bullet is linked to a page. If you don’t have one ready or if you just want to use ours for sake of example just copy and paste this code between the and tags of your page.

<li><a href="http://www.urldemo1.com">Menu Item Name1</a></li>
<li><a href="http://www.urldemo2.com">Menu Item Name2</a></li>
<li><a href="http://www.urldemo3.com">Menu Item Name3</a></li>
<li><a href="http://www.urldemo4.com">Menu Item Name4</a>

You will notice I left of the UL tag around these LI tags. I did this on purpose and if you add the UL tag after we complete this tutorial you will understand why I did this!

Now that you have your bullet list created its time to define a CSS class for them! Lets start by creating a <li class=""></li> tag around the whole code. We will name the CSS Div Class “rollOverColor”, the code should look like this!

<li class="rollOverColor"><a href="http://www.urldemo1.com">Menu Item Name1</a></li>
<li class="rollOverColor"><a href="http://www.urldemo2.com">Menu Item Name2</a></li>
<li class="rollOverColor"><a href="http://www.urldemo3.com">Menu Item Name3</a></li>
<li class="rollOverColor"><a href="http://www.urldemo4.com">Menu Item Name4</a></li>

You may be wondering what this div class will do, well basically we are going to use it as the background around our menu items. I mean we want our menu to have a specific background color right? We also want the menu to have a specific width to it, this div class will do both jobs nicely.

Now that we have our css class made its time to actually write the css for our page. I am assuming you will be placing your css in an html page or into a cms systems theme. However you do it make sure you call the stylesheet somehow. I use the following line to call mine…

<link href="/css/roll-over.css" rel="stylesheet" type="text/css" media="all">

Now thats all fine and dandy but what do we actually have in our roll-over.css file to make the actual roll over menu? Glad you asked, lets break it down!

Here is what is in the roll-over.css file…

.rollOverColor a:link, li { color: #006bb5; font-family: arial; font-weight: bold; background-color: #e4eeee; text-decoration: none; text-align: center; width: 200px; height: 25px; list-style-type: none; }

.rollOverColor a:hover { color: #302f2a; font-family: arial; font-weight: bold; background-color: #eae9e1; text-decoration: none; text-align: center; width: 200px; height: 25px; list-style-type: none; }

We have esentially created two css classes in our css file. The first one deals with the roll over menu background color, the font type and the black bullet all at the same time.

I won’t get into to much detail here as you can copy and past what is above and then tweak how you like it. The most important thing to remember here is that the CSS is pretty basic and if you import the style sheet to dreamweaver or any other css editor you will easily be able to edit these real time in a wysiwyg editor!

I hope this tutorial has proved useful to you and I hope you now know the basics to a roll over menu!

Here is the source files if you want to grab them, enjoy!

Be Sociable, Share!

•