Majin Planet

Simple Hover Menu Links

Alright the best way to show you how to do a menu using UL tag and css was to just make an exmple for you. I may even take this and put in on the site with my old Tutorials. Alright lets being.

Step 1

First thing you need to do is createa bullet list. It’s simple to do. Here is what the code should look like.

<ul>
<li>Some Text</li>
<li>Some More Text</li>
</ul>

Now when you view it, you will just see that the list shows the donts, the first thing we need to do is create a main id tag in css so that in the menu you would create a wrapper div tag, this way the style we add to the menu only effects the content in that wrapper and not the rest of the site, if you use bullet list else where.

Step 2

In your css file which should be label whatever.css we will create the wrapper which we will name “menu”.
Open your text editor or what ever you use to edit html in, create a new file and name it stylesheet.css. In the link you want to place this code.

#menu_set { font-size: 9px; color: #000000; text-align: left; margin: 0px; padding: 0px; height: auto; width: 150px;}

Now that we have our wrapper we can start adding sections to it so that it will only effect tags in this wrapper. At the moment we only have one tag, the ul tag. So we will not create this code in our CSS file.

#menu_set ul { margin:0px; padding:0px; color: #FFFFFF; }
#menu_set ul li { border-top:1px solid #666666; padding:2px; margin: 0px; color: #FFFFFF; list-style-image: none; list-style-type: none; text-align: left; }

list-style-image: none; list-style-type: none; This is what makes the dots go away, now it looks like a table, however it will load ten times faster and is far less code then if you where to use a table. Now all you do is place the wrapper around your code like so.

<div id=”menu_set”>
<ul>
<li>Some Text</li>
<li>Some More Text</li>
</ul>
</div>

Step 3

Now that you have your menu, lets add a roll over effect, again this is a better way then using images rollovers or other DHTML table rollovers. Use less code and will load your pages much faster.
Take the code you had before.

<div id=”menu_set”>
<ul>
<li>Some Text</li>
<li>Some More Text</li>
</ul>
</div>

Now Link your text so it should come out looking like this when your done

<div id=”menu_set”>
<ul>
<li><a href=”#”>Some Text</a></li>
<li><a href=”#”> Some More Text</a></li>
</ul>
</div>

Now add this code into your css file like so. Remember you can change the colors, and styles any way you want here to match your site.

#menu_set a { color: #000000; text-decoration:none; font-weight:bold; padding-left: 3px; }
#menu_set a:hover { color: #B5B5B5; font-weight:bold; text-decoration:none; }

Last part, now add two more css tags which look like this.

#menu_set ul li:hover { background-color:#1B1B1B; }
#menu_set ul .nw:hover { background:inherit; }

The first line is just a background color, make sure its different from your menu’s background color. Say your background is black, make this color blue. When ever you move your mouse over it, it will change. The next code, .nw is a class, you basically add class=”nw” to any il tag in your list, when this happens no roll over will take place. This is for if you wish for some not to rollover with out creating different wrappers.
You html menu should look like this.

<div id=”menu_set”>
<ul>
<li><a href=”#”>Some Text</a></li>
<li><a href=”#”> Some More Text</a></li>
</ul>
</div>

Your CSS code should look like this.

#menu_set { font-size: 9px; color: #000000; text-align: left; margin: 0px; padding: 0px; height: auto; width: 150px;}
#menu_set ul { margin:0px; padding:0px; color: #000000; }
#menu_set ul li { border-top:1px solid #666666; padding:2px; margin: 0px; color: #000000; list-style-image: none; list-style-type: none; text-align: left; }
#menu_set a { color: #000000; text-decoration:none; font-weight:bold; padding-left: 3px; }
#menu_set a:hover { color: #B5B5B5; font-weight:bold; text-decoration:none; }

There are many more advance things you can do with it, which is all control in your css file. It just comes to show what you can do with some style.
me style.