0

I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content. I looked online and trying to figure out the problem but cannot fixed. Does anyone can help me?
Thanks in advance, Helen

`/* main menu */

    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 960px;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: linear-gradient(#444, #111);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}
#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
    color: #fafafa;
}
#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    border-radius: 3px;
    transition: all .2s ease-in-out;  
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);      
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0; 
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3; 
    border-bottom-color: transparent;   
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
/* slider */
.slider-wrapper {
    overflow:hidden;
    width:984px;
    position:absolute;
    top:-14px;
    left:1px;
    background:
#f8f8f8;
    border-radius:18px 18px 0 0;
    -moz-border-radius:18px 18px 0 0;
    -webkit-border-radius:18px 18px 0 0
}
.slider {height:403px;width:948px;margin:10px auto}
.items {display:none}
.pagination {position:absolute;top:0;z-index:999}
.banner {width:400px;height:205px;position:absolute;top:92px;left:98px}
.prev {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;left:25px;top:183px;z-index:99;background:url(../images/slider-control.png) left top no-repeat}
.prev:hover {background-position:left bottom}
.next {display:block;width:22px;height:37px;text-indent:-5000px;position:absolute;right:22px;top:183px;z-index:99;background:url(../images/slider-control.png) right top no-repeat}
.next:hover {background-position:right bottom}
.b1 {
    color:#FFF;
    font-size:50px;
    line-height:1.2em;
    display:block;
    letter-spacing:-3px
}
.b2 {
    color:#F90;
    font-size:80px;
    line-height:1.2em;
    display:block;
    text-transform:uppercase;
    letter-spacing:-4px;
    margin:-12px 0 13px -5px
}
*+html .b2 {margin:-12px 0 5px -5px}
.b3 {
    color:#000;
    font-size:24px;
    line-height:1.2em;
    display:block;
    font-weight: bold;
}
/* content */
#content {width:100%;padding:10px 0 40px;background:#F8F8F8;border-radius:18px 18px 0 0;-moz-border-radius:18px 18px 0 0;-webkit-border-radius:18px 18px 0 0;position:relative;z-index:2}
#content .padding {
    padding:24px 12px 0;
    text-align: center;
}
.spacer-1 {width:100%;background:url(../images/pic-1.gif) 217px 0 repeat-y}
h2 {font-size:39px;line-height:1.9em;color:#0f0f0f;margin-bottom:5px;letter-spacing:-2px}
h3 {font-size:30px;line-height:1.3em;margin-top:-5px;letter-spacing:-2px}
h3 strong {display:block;color:#fefefe;margin-bottom:-11px}
h4 {
    font-size:23px;
    line-height:1.2em;
    color:#FFF;
    letter-spacing:-1px;
    margin-bottom:20px
}
h5 {color:#0f0f0f;text-decoration:underline;font-weight:normal}
h6 {
    color:#0f0f0f;
    font-weight:bold;
    margin-bottom:5px
}
.border-bot {width:100%;padding-bottom:20px;background:url(../images/pic-1.gif) 0 bottom repeat-x}
.box-bg {
    padding:33px;
    background:#eaeaea;
    color::#FFFFFF;
}
{
box-shadow: 10px 10px 5px #888;
}
.box {width:100%;background:url(../images/box.png) center 0 no-repeat #101010;border-radius:19px;-moz-border-radius:19px;-webkit-border-radius:19px}

.box h3 {margin-top:-8px}
.box .pad {padding:28px 35px}
.box.first .button {background:url(../images/button1.png) left top no-repeat}
.box.first .button:hover {background-position:left bottom}
.box.first .numb {background:url(../images/numb-1.gif) 0 0 repeat-x #00a9ff}
.box.second .button {background:url(../images/button2.png) left top no-repeat}
.box.second .button:hover {background-position:left bottom}
.box.second .numb {background:url(../images/numb-2.gif) 0 0 repeat-x #a2c902}
.box.third .button {background:url(../images/button3.png) left top no-repeat}
.box.third .button:hover {background-position:left bottom}
.box.third .numb {background:url(../images/numb-3.gif) 0 0 repeat-x #fabb0c}
.numb {display:inline-block;padding:3px 7px 6px;font-size:40px;line-height:1.2em;letter-spacing:-2px;color:#fefefe;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px}
*+html .numb {padding:6px 7px 4px}
.block-news {padding:27px 33px 30px;border:1px solid #eaeaea;background:url(../images/block-news-tail.gif) 0 0 repeat-x #f9f9f9;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px}
.button {display:block;width:43px;height:43px;text-indent:-5000px}
.button-2 {display:inline-block;font-size:19px;line-height:1.21em;letter-spacing:-1px;color:#fefefe;padding:9px 20px 11px;background:url(../images/button-tail.gif) 0 0 repeat-x #3c3c3c;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px}
.button-2:hover {background:#3c3c3c}
.list-1 li {
    line-height:24px;
    padding-left:10px;
    background:url(../images/marker.gif) 0 10px no-repeat;
    color: #666;
}
.list-1 li a {display:inline-block;color:#9d9d9d}
.list-1 li a:hover {
    text-decoration:underline;
    color: #666;
}
.list-2 li {line-height:24px}
.link {color:#9d9d9d}
.link:hover {text-decoration:none} 
.link-1 {display:inline-block;font-size:14px;padding-right:8px;background:url(../images/marker-3.gif) right 8px no-repeat}
.link-1:hover {color:#fff} 
.text-1 {line-height:20px;margin:0} 
dl.address {line-height:24px;color:#9d9d9d}
dl.address span {float:left;width:74px;color:#fefefe}
dl.contact {line-height:20px;color:#9d9d9d}
dl.contact span {display:block;color:#0f0f0f}
dl.contact dt, dl.contact dd {margin-bottom:5px}
.tdate-1 {font-size:20px;line-height:1.2em;color:#0f0f0f;text-align:center;letter-spacing:-2px;margin:-8px 16px 0 0}
.tdate-1 strong {display:block;font-size:49px;line-height:1.2em;color:#00a9ff;margin-bottom:-10px}
.tdate-2 {float:left;color:#0f0f0f}
.news {padding-left:25px;background:url(../images/pic-1.gif) 0 0 no-repeat}
#contact-form {display:block}
#contact-form  label {display:block;height:30px;overflow:hidden}
#contact-form  input {float:left;width:526px;font-size:13px;line-height:1.23em;color:#0f0f0f;padding:4px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #ffffff;background:none}
#contact-form textarea {height:262px;overflow:auto;float:left;width:526px;font-size:13px;line-height:1.23em;color:#0f0f0f;padding:4px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #ffffff;background:none}
.text-form {float:left;display:block;font-size:14px;width:73px;line-height:1.78em;color:#0f0f0f}
.buttons {padding-top:16px;text-align:right}
.buttons a {margin-left:6px;padding:9px 25px 11px}
3
Contributors
4
Replies
30
Views
4 Years
Discussion Span
Last Post by JorgeM
0

No, I dont have :(

This is html of menu

<div class="row-2">
                    <nav>
                        <ul id="menu">
    <li><a href="">Home Page</a></li>
    <li>
        <a href="services.html">Our Services</a></li>

    <li><a href="">Our Products</a>
    <ul>
            <li><a href="">Firts </a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
            <li><a href="#">Fifth</a></li>
            <li><a href="#">Seventh</a></li>
        </ul>
    </li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Contact Us</a></li>
</ul>
                    </nav>
                </div>
0

Line 191: #content has a z-index of 2.
Line 61: #menu ul has a z-index of 1.
A lower z-index value will place an element behind one with a higher z-index value.
Unless specified, children of an element will be affected by their closest ancestor's z-index.
Therefore even if the UL is at a y-coordinate above the content, the dropdown items which may overlap your content will appear behind it, since their parent's z-index is 1.

Sorry, I don't have time to look at this more in-depth right now, hoping this might be a quick fix.

-EF

Edited by EvolutionFallen

0

Unfortunatley with the code you have provided so far, It's very challenging, at least for me to be able to pick out the exact problem by looking at hundreds of lines of code when all of the revelant code is not available.

From this point, I'd be looking at seeing if its a z-index problem. Try to give the menu a higher z-index and/or a lower z-index to the elements your drop down is going behind.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.