【问题标题】:Blogger Drop Down Menu Appear Behind PostBlogger 下拉菜单出现在帖子后面
【发布时间】:2015-03-21 14:48:24
【问题描述】:

我正在尝试为我的博客制作我自己的下拉菜单,但是当我放置它时,下拉菜单出现在帖子后面,我已经尝试了 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 的下拉菜单来了解问题

【问题讨论】:

  • 您应该重新创建问题并发布该代码。您只给了我们从外观上看非常好的菜单代码。向我们展示一个 jsfiddle 或类似的东西也会很有帮助。
  • 当然可以,即使在 jsfiddle 上也可以,但是当我把它放到博客中时它不起作用,好吧,我会用截图更新这个问题 :)

标签: html css blogger


【解决方案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

【讨论】:

  • 哇,真的好用!谢谢,我只是编辑博客 HTML :D 谢谢
  • 确实,我自己也看到了。不错!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-22
  • 1970-01-01
  • 2022-01-14
  • 2017-12-09
  • 1970-01-01
相关资源
最近更新 更多