Drop down menu hidden

Question

guest27 0 Newbie Poster

12 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}

user-interface web-design

3 Contributors
4 Replies
241 Views
5 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by JorgeM

Dani AI

Generated 8 Months Ago

This is the classic stacking/overflow issue rather than a hover or selector bug. posted the menu and slider CSS; and were right to suspect stacking order. A few extra checks and a small CSS change will usually fix it.

Key things to know before changing values: z-index only affects positioned elements (position set to relative/absolute/fixed/sticky). Ancestors can form their own stacking contexts (position+z-index, transform, opacity < 1, filters), and overflow: hidden on an ancestor will clip anything that tries to escape its box. The slider wrapper and content area are common culprits because they are positioned and/or have overflow rules.

Quick fixes to try (apply in devtools first so changes are reversible):

Give the menu a positioned stacking context and raise its z-index above the slider/controls.
If a slider plugin sets very large z-index or uses transforms, either lower those slider values or move the dropdown out of that blocking ancestor (append it to body) so it is not trapped.
Inspect computed styles in the browser devtools for the menu, its ancestors, and the slider; check position, z-index, transform, and overflow.

Example CSS to test:

/* quick test: place menu above other page elements */
#menu { position: relative; z-index: 2000; }
#menu ul { position: absolute; z-index: 2100; }

/* alternative: push slider back if safe to change */
.slider-wrapper { position: relative; z-index: 0; }

If the dropdown is still hidden after raising the menu z-index, check for transforms/opacity on parent elements or for overflow:hidden on an ancestor (often the slider wrapper). Moving the dropdown markup to a top-level container (or appending it to body with JS) avoids ancestor clipping when other fixes are impractical.

All 4 Replies

JorgeM 958 Problem Solver

12 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

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers