Blogger Drop Down Menu Appear Behind Post

Question

i'm trying to make my own drop down menu for my blog but when i put it, the dropped menu appears behind the post, i already try the z-index: 9999; and all possible position: but still didn't fixed.

this is my CSS:

.myMenuTable {
    opacity: 0.7;
    padding: 0 0 10px 0;
    width: 100%;
    height: 40px;
}
.myMenuTD {
    cursor: pointer;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    width: 20%;
    background-color: #ffffff;
    color: #000000;
    transition-duration: 500ms;
    border: 1px solid #f0f0f0;
    position: relative;
}
.myMenuTD:hover {
    background-color: #00afff;
    color: #ffffff;
}
.myMenuArrow {
    float: right;
    border-bottom: 20px solid #000000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 1px solid transparent;
    transition-duration: 500ms;
    transform-origin: 50% 12px;
}
.myMenuTD:hover .myMenuArrow {
    transform: rotate(180deg);
    border-bottom: 20px solid #ffffff;
}
.myMenuDown {
    width: 100%;
    max-height: 4px;
    text-align: center;
    position: absolute;
    border: 1px solid #f0f0f0;
    background-color: #00afff;
    transition: max-height 500ms ease;
    margin: 10px -11px;
    cursor: default;
}
.myMenuTextDiv {
    color: #ffffff;
    height: 4px;
    width: 100%;
    vertical-align: middle;
    line-height: 30px;
    transition-duration: 500ms;
    cursor: pointer;
    opacity: 0.0;
    visibility: hidden;
}
.myMenuTD:hover .myMenuDown {
    max-height: 500px;
}
.myMenuTD:hover .myMenuTextDiv {
    height: 30px;
    opacity: 1.0;
    visibility: visible;
}
.myMenuTextDiv:hover {
    color: #000000;
    background-color: #ffffff;
}
a.myMenuLink {
    color: #ffffff;
    text-decoration: none;
    display: block;
    height: 100%;
    width:100%;
    transition-duration: 500ms;
}
.myMenuTextDiv:hover a.myMenuLink {
    color: #000000;
}

and this is my HTML

<table border='0' class='myMenuTable' cellpadding='10' cellspacing='0'>
    <tr>
        <td class='myMenuTD'>
            <font id='myMenuFont0'>Drop#1</font><div class='myMenuArrow'></div>
            <div class='myMenuDown'>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>1</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>2</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>3</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>4</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>5</a>
                </div>
            </div>
        </td>
        <td class='myMenuTD'>
            <font id='myMenuFont1'>Drop#2</font><div class='myMenuArrow'></div>
            <div class='myMenuDown'>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>1</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>2</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>3</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>4</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>5</a>
                </div>
            </div>
        </td>
        <td class='myMenuTD'>
            <font id='myMenuFont2'>Drop#3</font><div class='myMenuArrow'></div>
            <div class='myMenuDown'>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>1</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>2</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>3</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>4</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>5</a>
                </div>
            </div>
        </td>
        <td class='myMenuTD'>
            <font id='myMenuFont3'>Drop#4</font><div class='myMenuArrow'></div>
            <div class='myMenuDown'>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>1</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>2</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>3</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>4</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>5</a>
                </div>
            </div>
        </td>
        <td class='myMenuTD'>
            <font id='myMenuFont4'>Drop#5</font><div class='myMenuArrow'></div>
            <div class='myMenuDown'>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>1</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>2</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>3</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>4</a>
                </div>
                <div class='myMenuTextDiv'>
                    <a href='#' class='myMenuLink'>5</a>
                </div>
            </div>
        </td>
    </tr>
</table>

please help me, any help appreciated.

Update: Screenshot

you can try the dropdown from My Blog to know the problem

Answer 1

Your site is structured like

<div class = "tabs-outer">
    //menu bar is in here
</div>
<div class = "main-outer">
    //blog post is in here
</div>

Give your tabs-outer a z-index greater than zero.