View Full Version : Help with code for hover over menu

11-08-2012, 05:21 PM
Hi guys.

I'm trying to create hover over menus for the first time. I've been trying to use code that I found on one of the forums but it's not quite working for me. Couple of issues:
1. Can't change the font to the style of the rest of my site - Blackadder ITC
2. Can't change the font size to the style of the rest of my site
3. When you hover over the menus that should have drop down choices there's nothing happening
4. I want the width to be taking up most of the width of the page (what's left in the table after the logo)

Any advice much appreciated!

Here's the code I'm using:

<table><table width="100%" align="center"><tr><td align="left"><img src="http://i5.photobucket.com/albums/y163/dramqueenuk/Punch%20Productions/Punchlogo.jpg" alt="IE" align="center" width="200" height="140"></td>
<td align="center"><td colspan="2">
<body BGcolor="'#000000" link="#ffffff" vlink="#ffffff">
<style type="text/css">
ul{padding:0; margin:0; list-style:none;}
li{float: left; position: relative; width: 5em}
li ul {display: none; position: absolute; top: 1em; left: 0;}
li > ul {top: auto; left: auto;}
li: hover ul, li.over ul {display: block;}
ul li a {display: block; color: #fff; border:1px solid #fff; background: #000000; text-decoration: none; padding: 3px;}
a {font face="blackadder ITC"; font size="6"; display: block; color: #fff; border:1px solid #fff; background: #000000; text-decoration: none; padding: 3px;}

<li><a href="index.html">Home</a></li>

<li><a href="about us.html">About Us</A>
<li><a href="about us.html">The Company</A></li>
<li><a href="company directors.html">Company Directors</a></li>

<li><a href="theatre.html">Theatre</a></li>

<li><a href="corporate.html">Corporate</a>
<li><a href="education.html">Education</a></li>
<li><a href="entertainment.html">Entertainment</a></li>
<li><a href="training.html">Training</a></li>

<li><a href="other services.html">Other Services</a>
<li><a href="directing.html">Directing</a></li>
<li><a href="granny-gram.html">Granny-grams</a></li>
<li><a href="producing.html">Producing</a></li>
<li><a href="rap-o-gram.html">Rap-o-grams</a></li>
<li><a href="scriptwriting.html">Scriptwriting</a></li>
<li><a href="stage combat.html">Stage Combat</a></li>
<li><a href="workshops.html">Workshops</a></li></ul></li>

<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact us.html">Contact Us</a></li></ul>



11-09-2012, 09:23 AM
li: hover ul, li.over ul {display: block;}

That should be

li:hover ul, li.over ul {display: block;}

11-09-2012, 06:30 PM
I think you should also check this last line of your code:

I think it should be:


11-10-2012, 01:29 AM
Good catch vjm :thumbsup:

dramqueenuk, see the links about validation in my signature line. They can help with errors like that.

11-10-2012, 04:40 AM
Thanks Excavator! :D

11-10-2012, 06:55 PM
It might be better if you build this in a WYSIWYG (Dreamweaver, etc). Then you can manipulate things on the design side, and watch what the code does at the same time. I think it's one of the best ways to learn.