Blogger 下拉菜单出现在 Post 后面

Question

我正在尝试为我的博客制作自己的下拉菜单，但是当我放置它时，下拉菜单出现在 post 后面，我已经尝试了 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。

Blogger 下拉菜单出现在 Post 后面

Blogger Drop Down Menu Appear Behind Post

html

css

blogger