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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS drop down menu not functioning in footer

    The CSS I found for a drop down menu works when positioned at the top of the page. However, when placed in the footer, where I need it to be, the drop down doesn't appear long enough to be clicked on.

    do i need to adjust my footer or the code for the drop down menu?

    Thanks in advance!

    CSS for footer:
    #bottom {
    background-color:#FFFFCC;
    position: absolute; /* ie6 value b/c !important ignored */
    width: 100%;
    bottom: 0px;
    z-index: 5;
    height:100px;
    }

    CSS for drop down
    #nav {
    margin: 0;
    padding: 0;
    }

    #nav li ul {
    margin: 0;
    padding: 0;
    display: none;
    color: #999999;
    }

    #nav a {
    text-decoration: none;
    }

    #nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;

    font-family: Arial, Helvetica, sans-serif

    }



    #nav li ul { /*put the subnav below*/
    position: absolute;
    top: 33px;
    *top: 44px;
    left: 5px;
    padding-top: 10px;
    height: 10px;
    width: 1000px;

    }

    #nav li a {
    font-size: 10px;
    color: #999999;
    display: block;
    height: 15px;
    width: 100px;
    padding: 5px;

    }



    #nav li ul a {
    float: left; /*ie doesn't inherit the float*/
    border: 0;

    width: auto;
    margin-right: 15px;
    }



    #nav li:hover ul {
    /*put the subnav below*/
    top: 33px;
    *top: 44px; /*reposition for IE*/

    display: block;
    z-index: 6000;
    }


    #nav li:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The best idea is to reduce the space in between the parent list and child list. For this, remove the padding-top from #nav li ul and reduce the value of top
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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