Grow your CSS skills. Land your dream job.

Jquery Dropdown Menu not working with slideshow banner

  • # August 25, 2009 at 12:51 pm

    Help! Here is the page I’m having issues with http://thompsoninsurancefl.com/
    As you will see, the banner uses a jquery plugin for the "slideshow" or photos fading in and out. I also used the simple jquery drop down menu that I found on this site (http://css-tricks.com/simple-jquery-dropdowns/). The drop down menu worked fine before adding the slide show banner. "Property & Casualty" and "Commercial" should have a dropdown menu like the "About" link, but for some reason, the dropdown doesn’t work with the slide show.

    Here is the html

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






    Girl driver
    Couple in front of house
    Business man driver
    Grandparents with grand daughter in Marina
    click here button

    photo of auto

    Property & Casualty Insurance

    We can write a policy to cover all of your personal assets.

    Learn more.

    photo of building

    Commercial Insurance

    Protect your business assets: auto, property and liability.

    Learn more.

    photo of couple

    Property & Casualty Insurance

    Plan ahead and learn to invest wisely.

    Learn more.

     



    And the CSS

    Code:
    @charset “UTF-8″;
    html, body, #main_wrapper {height: 100%;}
    body {
    font: 100% Arial, Helvetica, sans-serif;
    margin: 0 auto; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url(images/bcknd_gradient.gif);
    background-repeat: repeat-x;
    height: 100%;
    }
    .oneColFixCtr #main_wrapper {
    width: 975px;
    background-image: url(images/bcknd_shadow.png);
    text-align: left;
    height:auto;
    min-height: 100%;
    margin: 0 auto ;
    }
    .oneColFixCtr .wrapper {
    width: 840px;
    margin-left: 65px;
    }#header {
    height: 75px;
    padding-top: 37px;
    }
    #logo {
    width: 230px;
    float: left;
    display: inline;
    }.tagline {
    font-family: Georgia, “Times New Roman”, Times, serif;
    font-size: 14px;
    font-style: italic;
    color: #666666;
    }
    #tagline {
    float: left;
    display: inline;
    padding-top: 38px;
    width: 290px;
    padding-left: 50px;
    }
    #address {
    float: left;
    display: inline;
    padding-left: 30px;
    width: 240px;
    }
    .headeraddress {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
    text-align: right;
    line-height: 19px;
    padding-left: 25px;
    }
    #photo_banner {
    height: 240px;
    border-top: solid 2px #0098db;
    border-bottom: solid 2px #0098db;
    background-image: url(images/needaquote.gif);
    background-repeat: no-repeat;
    background-position: top right;
    clear: both;
    }
    #slideshow {
    float: left;
    width: 569px;
    display: inline;
    height: 240px;
    position: relative;
    }
    #slideshow img {
    left: 0px;
    top: 0px;
    position: absolute;
    }
    #quote {
    float: left;
    display: inline;
    padding-left: 130px;
    padding-top: 155px;
    width: 130px;
    }
    #categories {
    margin-top: 35px;
    height: 290px;
    overflow: hidden;
    clear: both;
    }
    .column1 {
    width: 270px;
    float: left;
    margin-right: 0px;
    padding-left: 10px;
    }
    .column2 {
    width: 268px;
    float: left;
    border-left: solid 1px #999999;
    border-right: solid 1px #999999;
    padding-left: 10px;
    }
    .column3 {
    width: 270px;
    float: left;
    padding-left: 10px;
    }
    .bodytext {
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    }
    h1 {
    font-size: 20px;
    color: #0066A4;
    font-weight: normal;
    text-transform: uppercase;
    }
    h2 {
    font-size: 18px;
    color: #0066A4;
    font-weight: normal;
    }
    h3 {
    font-size: 14px;
    color: #666666;
    margin-bottom: -12px;
    }
    .footer {
    height: 50px;
    background-color: #0066A4;
    width: 840px;
    text-align: center;
    margin-left: 65px;
    padding-top: 10px;
    margin-top: 15px;
    } .footer a {
    text-decoration: none;
    color: #FFFFFF;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 12px;
    } .footer a:hover {
    color:#a2d3e7;
    } .footer p {
    font-size: 11px;
    color: #a2d3e7;
    margin-top: 8px;
    }
    .push {
    height: 70px;
    }
    .bottomnav_divider {color: #FFFFFF}
    #topnav {
    float: left;
    margin-top: 20px;
    width: 840px;
    margin-left: -15px;
    }
    ul {
    list-style: none;
    }
    /*
    LEVEL ONE
    */
    ul.dropdown { position: relative; }
    ul.dropdown li {
    font-weight: normal;
    float: left;
    zoom: 1;
    background: #ffffff;
    }
    ul.dropdown a:hover {
    color: #5ccaf0;
    }
    ul.dropdown a:active {
    color: #5ccaf0;
    }
    ul.dropdown li a {
    display: block;
    padding: 5px 13.5px;
    border-right: 1px solid #0098db;
    color: #0098db;
    font-size: 14px;
    text-decoration: none;
    }
    ul.dropdown li:last-child a { border-right: none; } /* Doesn’t work in IE */
    ul.dropdown li.hover,
    ul.dropdown li:hover {
    background: #0098db;
    color: #FFFFFF;
    position: relative;
    }
    ul.dropdown li.hover a {
    color: #FFFFFF;
    }

    /*
    LEVEL TWO
    */
    ul.dropdown ul {
    width: 160px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0px;
    }
    ul.dropdown ul li {
    font-weight: normal;
    background: #5ccaf0;
    color: #000;
    border-bottom: 1px solid #ffffff;
    float: none;
    }
    /*
    LEVEL THREE
    */
    ul.dropdown ul ul {
    left: 100%;
    top: 0;
    }
    ul.dropdown li:hover > ul { visibility: visible; }

    /* IE 6 & 7 Needs Inline Block */
    ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
    .learnmore {
    font-size: 13px;
    color: #FFFFFF;
    line-height: 18px;
    text-decoration: none;
    background-color: #FF9900;
    padding: 2px 5px 2px 5px;
    }
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    I’m thinking that the slideshow is somehow interfering with the drop down menu because of the relative and absolute positioning on the #slideshow and #slideshow img but I don’t know how to fix it.

    Please help!

    kam
    # August 27, 2009 at 12:02 pm

    Sorry, I’m not seeing the problem here.

    Flash 10 slideshow is going on and I can see the menu items happening (under Commercial ->Auto, Property. Liability). Links are going to ‘#’ for the test.

    Is there a before and after to show your issue?

    # August 27, 2009 at 1:37 pm

    Thanks for the reply. I was using a jquery plugin for the slide show in the photo banner, however, it was conflicting with the dropdown menu. I believe because both the drop down menu and slide show banner was using both relative and absolute positioning. That’s my guess anyway. The drop down menu was falling behind the banner.

    I have since changed out the jquery slideshow with a flash banner. The flash seems to be a work-around. I would prefer to use the jquery plugin but couldn’t get it to play nice with the dropdown menu. Do you know of any way?

    Dropdown menu works fine with static image, but when I added relative positioning and absolute positioning to banner and img, the menu won’t work.

    If I can find time today, I will upload the former link as a demo.

    # September 12, 2009 at 7:09 am

    I have horizontal menu and a flash slideshow menu will not dropdown , I have tried z-index it works fine in explorer 8 but in nothing else

    kam
    # September 14, 2009 at 12:45 am

    Have you tried setting the wmode option on flash to ‘opaque’ or ‘transparent’?

    # May 27, 2012 at 4:48 am

    I suppose you have finally fixed your issue. When I look at the site (http://www.thompsoninsurancefl.com/) I can now see that the jquery dropdown menu is working alright with the jquery slideshow.

    Please do share & let us know how you fixed this issue after all?

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

You must be logged in to reply to this topic.

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