Hover over other button with hover function

[zelrick]

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

[zelrick]

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.