Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with code for hover over menu

    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:
    Code:
    <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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    li: hover ul, li.over ul {display: block;}
    That should be
    Code:
    li:hover ul, li.over ul {display: block;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    kayut (11-10-2012)

  • #3
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I think you should also check this last line of your code:
    </html></td></table>

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


  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good catch vjm

    dramqueenuk, see the links about validation in my signature line. They can help with errors like that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    vjm (11-10-2012)

  • #5
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Thanks Excavator!

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •