Results 1 to 2 of 2

Thread: Help with CSS horizontal menu

  1. #1
    Join Date
    Jul 2007
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Help with CSS horizontal menu

    1) Script Title: CSS Horizontal Hover Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/hover.htm

    3) Describe problem:
    My page is 820 pixels wide. How do I make the menu bar extend the full length (820 pixels) across the page? Thanks!
    Last edited by tonto11; 09-08-2008 at 05:51 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Try replacing the original CSS of the script with the below instead:

    Code:
    <style type="text/css">
    
    .hovermenu{
    width: 100%;
    background-color: #FFF2BF;
    overflow: hidden;
    margin: 0;
    padding: 0;
    }
    
    .hovermenu ul{
    font: bold 13px arial;
    margin: 0;
    padding: 0;
    padding-left: 0;
    margin-left: 0;
    height: 20px;
    }
    
    .hovermenu ul li{
    list-style: none;
    display: inline;
    }
    
    .hovermenu ul li a{
    padding: 2px 0.5em;
    text-decoration: none;
    float: left;
    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>
    DD Admin

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
  •