Results 1 to 2 of 2

Thread: Horizontal hover menu

  1. #1
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal hover menu

    I have copied the code to my page and can see it work, however, how can I put it in a table on my site where I want it? There is no instructions on how to do that. Also, is there a way to do this verticle?
    thanks for your help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Just putting the html portion (step2) in a table cell seemed to work fine here. A vertical version in a table could be done like so:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    td.hoverm{
    height:135px;
    padding:0 10px;
    vertical-align:top;
    background-color: #FFF2BF;
    }
    
    *html td.hoverm {
    padding-top:10px;
    }
    
    .hovermenu {
    margin-bottom:-10px;
    }
    
    .hovermenu ul{
    font: bold 13px arial;
    padding-left: 0;
    margin-left: 0;
    height: 20px;
    }
    
    .hovermenu ul li{
    list-style: none;
    display:block;
    margin:8px 0;
    }
    
    .hovermenu ul li a{
    padding: 2px 0.5em;
    text-decoration: none;
    color: black;
    background-color: #FFF2BF;
    border: 2px solid #FFF2BF;
    }
    
    .hovermenu ul li a:hover{
    background-color: #FFE271;
    border-style: outset;
    }
    
    html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
    border-style: inset;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
        <td class="hoverm"><div class="hovermenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    <li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.google.com">Google</a></li>
    </ul>
    </div></td>
          </tr>
          </table>
          
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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