dramqueenuk
11-08-2012, 04: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!
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!