...

View Full Version : Help with code for hover over menu



dramqueenuk
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:


<html>
<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">
<center>
<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;}
</style>

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

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

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

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

<li><a href="other services.html">Other Services</a>
<ul>
<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>

</html></td></table>

Thanks!

abduraooft
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;}

vjm
11-09-2012, 06:30 PM
I think you should also check this last line of your code:
</html></td></table>

I think it should be:
</td></table></html>

:)

Excavator
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.

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

jpcsolutions
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum