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,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •