Grow your CSS skills. Land your dream job.

Dropdown Menu hiding behind photo banner

  • # August 26, 2009 at 11:36 am

    Hi All,

    I posted this issue yesterday, and am back again today since no one responded. I also figured out that the dropdown menu in the afflicted site is actually hiding behind the photo banner (that changes out using .cycle plugin). I’m not sure if this is a jquery issue or a CSS. I’m thinking it’s a CSS issue but for the life of me, I can’t figure it out. If you have time to take a look at it and let me know what I’m doing wrong, I would greatly appreciate it. Thank you!

    Here is the site:

    http://thompsoninsurancefl.com/

    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.

     



    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 {
    width: 569px;
    height: 240px;
    padding: 0;
    margin: 0 auto;
    float: left;
    }
    #slideshow img {
    left: 0px;
    top: 0px;
    width: 569px;
    height: 240px;
    }
    #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 {
    margin-top: 20px;
    width: 840px;
    margin-left: -15px;
    clear: both;
    }
    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;
    clear: both;
    }
    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;
    width: 0px;
    height: 0;
    }

    # August 27, 2009 at 2:34 am

    well I am guessing you figured it out? I looked in firefox and in I.E and I don’t see the issue you are talking about. If you are still having trouble, could you narrow down the issue, which tab, what browser.

    # August 27, 2009 at 2:39 am
    Quote:
    I posted this issue yesterday, and am back again today since no one responded

    just bump the original thread in future, no need to have a duplicate thread.

    ok, it looks as if it is fixed in FF anyway, but things to look for is z-indexing, make sure your banner part has less z-indexing than the navigation drop downs.

    # August 27, 2009 at 1:43 pm

    Thanks for the reply. I never could solve the issue with the menu falling behind the banner using the jquery plugin slideshow. I ended up using a flash plugin instead. Would rather use the jquery slideshow instead. If you think it is z-index, I might go back and try it.

    Basically, both the drop down menu and slideshow using jquery used relative and absolute positioning. Think this may have been the conflict? I’m not sure what z-index is or zoom? are they related? the Dropdown UL had a zoom set to 1. I don’t know if the slideshow banner was using zoom. If you can shed some light on this I will retry with your recommendation.

    Thank you!

    # August 27, 2009 at 1:44 pm

    Sorry – as far as browsers were concerned, it was happening in both FF and Safari. Not sure about IE.

    # August 27, 2009 at 2:20 pm

    z-index in like a stack of cards z-index-1 is under z-index 1 so the top one is the one you see in front of the one at the back…

    so you could have a layer in front with some opacity so you can see through to the other layer so to speak

    # August 27, 2009 at 2:39 pm

    That’s right! I have heard about it but was confused. So, if the dropdown menu (which is before the banner in html) is appearing behind the banner, how would that work? The dropdown menu has z-index 1, what would the z-index be for the photo banner to have the menu appear in front of it?

    Thank you in advance for helping me out…I’m a newbee, so would love to grasp this concept.

    # August 27, 2009 at 5:11 pm

    you could use a much higher number like 100. That’s what I usually see. that should get the menu to appear over everything else.

    # August 27, 2009 at 8:25 pm
    "cybershot" wrote:
    you could use a much higher number like 100. That’s what I usually see. that should get the menu to appear over everything else.

    Thanks! I will try it!
    Kim

    # August 27, 2009 at 9:08 pm

    ikthius and cybershot,

    Thank you so much!!! That was the issue—I set z-index to a higher number on the dropdown menu so that it would fall in front of the photo banner. Here is the updated link if anyone wants to view it in action:

    http://thompsoninsurancefl.com/

    I’m so glad I figured it out—I like using the jquery slideshow much better than a flash plugin. I had read a tutorial on z-index a while back, but I haven’t had any run-ins with it until now.

    Your help is much appreciated!

    # August 28, 2009 at 2:22 am

    glad it is sorted

    von
    # August 28, 2009 at 9:00 pm

    I think something else that’s important to remember that when z-index is not defined, "what’s on top" is based on the order of objects within the code. Like the deck of cards illustration, you put out your first card and if you lay your second card to overlap at all, it will be on top of the first.

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

You must be logged in to reply to this topic.

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