0

Hello DaniWeb Community,

I have a hover drop down menu, below this is another hover drop down menu..

Once you hover your mouse pointer to this drop down menu it show the list..

The problem is it overlap to the 2nd drop down menu.

I want my list to be on top of this 2nd drop down menu so I can select all in the list.

Here is my cut html code:

<tr><td>
        <div class="dropdown">
            <!-- trigger button -->
                <button>Past Initializations | &#x25BC</button>
            <!-- dropdown menu -->
            <ul class="dropdown-menu">
                <li><a href="STNrr/6hr/0000/STNrr24.html" target="iframe2">-0000</a></li>
                <li><a href="STNrr/6hr/0600/STNrr24.html" target="iframe2">-0600</a></li>
                <li><a href="STNrr/6hr/1200/STNrr24.html" target="iframe2">-1200</a></li>
                <li><a href="STNrr/6hr/1800/STNrr24.html" target="iframe2">-1800</a></li>
            </ul>
        </div>
</tr>

and this is my CSS code:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    /****************
     ** NEW STYLES **
     ****************/
    list-style: none; /** Remove list bullets */
    width: 100%; /** Set the width to 100% of it's parent */
    padding: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/** Button Styles **/
.dropdown button {
    background: #336699;
    color: #FFFFFF;
    border: none;
    margin: 0;
    padding: 0.4em 0.8em;
    font-size: 1em;
}

/** List Item Styles **/
.dropdown a {
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #CCCCCC;
    color: #333333;
}
/** List Item Hover Styles **/
.dropdown a:hover {
    background: #BBBBBB;
}

Please help,
Thank you and God Bless

1
Contributor
1
Reply
12
Views
1 Year
Discussion Span
Last Post by zelrick
1

Hello DaniWeb,

After searching for solution I figured it out.

I just want to share that someone might encounter same problem as mine.

So I add z-index.

.dropdown:hover .dropdown-menu {
    z-index: 999;
    display: block;
}

That solve the problem.

This question has already been answered. 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.