Grow your CSS skills. Land your dream job.

Drop down menu problem…Please help

  • # October 1, 2008 at 1:35 pm

    Hello All,

    I’m working on a new site and I’m having problems getting the drop down menus to work. Here’s my code before I get into the problem:

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    height="255" codebase='http://www.apple.com/qtactivex/qtplugin.cab'> controller="true" loop="true" pluginspage='http://www.apple.com/quicktime/download/'/>

    CSS

    Code:
    /*RESETS & BASIC PAGE SETUP*/

    *{
    margin: 0;
    padding: 0;
    }

    html{
    overflow-y: scroll;
    }

    body{
    font: 62.5% Helvetica, Arial, Verdana, Geneva, sans-serif;
    background: #057eb7;
    }

    ul{
    list-style: none inside;
    }

    p{
    font-size: 1.2em;
    line-height: 1.3em;
    margin-bottom: 1.2em;
    }

    a{
    outline: none;
    color: #999999;
    }

    a img{
    border: none;
    }

    /*END RESET*/

    /*PAGE STRUCTURE */

    div#page{
    width: 960px;
    margin: 0 auto;
    background: #ffffff;
    }

    div#wrap{
    margin: 0 auto;
    }

    /*HEADER*/

    div#header{
    width: 949px;
    margin: 0 auto;
    }

    /*NAV*/

    ul#nav{
    width: 949px;
    height: 47px;
    margin: 0 auto;
    }
    ul#nav li{
    display: inline;
    }
    ul#nav li a{
    display: block;
    height: 47px;
    text-indent: -9999px;
    float: left;
    }
    ul#nav li#nav-home a{
    width: 154px;
    background: url(images/nav-home.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-about a{
    width: 129px;
    background: url(images/nav-about.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-screening a{
    width: 200px;
    background: url(images/nav-screening.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-journal a{
    width: 153px;
    background: url(images/nav-journal.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-media a{
    width: 118px;
    background: url(images/nav-media.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-partners a{
    width: 195px;
    background: url(images/nav-partners.jpg) bottom center no-repeat;
    }
    ul#nav li#nav-home a:hover{
    background-position: top center;
    }
    ul#nav li#nav-about a:hover{
    background-position: top center;
    }
    ul#nav li#nav-screening a:hover{
    background-position: top center;
    }
    ul#nav li#nav-journal a:hover{
    background-position: top center;
    }
    ul#nav li#nav-media a:hover{
    background-position: top center;
    }
    ul#nav li#nav-partners a:hover{
    background-position: top center;
    }
    ul#nav li ul{
    display: none;
    position: absolute;
    }
    ul#nav li:hover ul{
    display: block;
    border: 1px solid #057eb7;
    background: #ffffff;
    text-align: center;
    }

    /*END NAV*/

    /*END HEADER*/

    /*CONTENT*/

    div#crest{
    width: 949px;
    height: 136px;
    background: url(images/crest.jpg);
    }

    div#trailer{
    width: 949px;
    height: 741px;
    background: url(images/trailerbg.jpg);
    }
    div#trailer div#movie{
    width: 350px;
    height: 270px;
    float: right;
    padding: 100px 50px 0 0;
    }

    div#credits{
    width: 949px;
    height: 316px;
    }

    /*END CONTENT*/

    /*END STRUCTURE & STUFF*/

    Here’s the problem:

    My hover state is working, but the "li" in the "ul" that contains the drop down menu isn’t working. It keeps repeating the background image of the root "li" when it should be showing the drop down menu with the links. Not the same repeated image. Here’s a link where you can view it for yourself: http://www.hollywoodisle.com/test. I’ve been working on this problem for the last day and a half. Any help would be greatly appreciated.

    Peace,
    Dhane Diesil

    # October 3, 2008 at 9:27 am

    I was trying to figure this out and it was wracking my brain so I had to let it go… One thing though, it reminds me of the superfish menus sort of. Check this out:

    http://users.tpg.com.au/j_birch/plugins … /#examples

    Check out the "Examples" then the "Nav Bar Example".

    Perhaps starting there and altering to fit your look would be easier?

    # October 5, 2008 at 1:54 pm

    Chris,

    I appreciate it. It was racking my brain too. But thanks once again for taking a look at it!

    Peace

    # October 6, 2008 at 12:14 am

    What’s up with sneakersupplier spamming all the forums. Hopefully links are set to nofollow.

    # October 6, 2008 at 4:45 am

    Good think,I try to solve this problem

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".