Member Avatar for guest27

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
  • 233 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Do you have this site online somewhere so we can also take a look at the HTML?

Member Avatar for guest27

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>
Member Avatar for EvolutionFallen

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
Member Avatar for JorgeM

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.