Drop down menu hidden

Question

guest27 0 Newbie Poster

10 Years Ago

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}

web-design

3 Contributors
4 Replies
233 Views
5 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by JorgeM

All 4 Replies

JorgeM 958 Problem Solver

10 Years Ago

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

Reply to this topic

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.

guest27 0 Newbie Poster · Answer 1 · 2013-10-21T14:23:51+00:00

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>

EvolutionFallen 107 Junior Poster · Answer 2 · 2013-10-21T16:52:34+00:00

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

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 3 · 2013-10-21T16:54:13+00:00

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.

Drop down menu hidden

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers