Blogger下拉菜单出现在帖子后面

Question

我试图为我的博客制作我自己的下拉菜单，但是当我把它放在帖子后面，我已经尝试了z-index: 9999;和所有可能的position:但仍然没有修复。

这是我的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;
}

这是我的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>

请帮助我，任何帮助表示赞赏。

更新：屏幕截图

您可以尝试从My Blog下拉列表来了解问题

Answer 1

您的网站结构类似

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

将tabs-outer z-index大于零。