Question

在我的标题中，我有一个按钮，当您将鼠标悬停在其上时，会在其下方显示一个选项框。标题下方是主页面。但是，当我通过将鼠标悬停在按钮上来打开选项时，页面的内容会降低到div下方。

jsfiddle：http://jsfiddle.net/Minecraft_Percabeth/xr7dcf3f/30/

jsfiddle全屏：http://jsfiddle.net/Minecraft_Percabeth/xr7dcf3f/30/embedded/result/

这是显示的菜单：

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    margin-top: -25px;

我需要添加什么吗？让其他div忽略它？浮动：对;这样主页div就会忽略它，但它的内容不会。

Answer 1

您可以使用position和z-index css属性实现所需目标。

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    position: relative;
    z-index: 1;
}

#jumbo {
    padding-top: 15px;
    width: 100%;
    height: 800px;
    background-color: #1B7523;
    position: absolute;
}

fiddle

Answer 2

将您的UL博客放入div＆＃34; right＆＃34;。

将博客的CSS类更改为position：absolute;并删除margin-top设置。

看到这个小提琴： http://jsfiddle.net/xr7dcf3f/34/

以下是HTML更改

    <div class='right blogs-menu'>
        <div class='button blog'>                 
            <h2>Blogs</h2>
        </div>
        <ul id='blogs'>
            <p>< James</p>
            <p>< Jeremiah</p>
            <p>< Peter</p>
            <p>< Thomas</p>
        </ul>
    </div>

和css改变

#blogs {
    float: right;
    padding: 0px 10px 0px 10px;
    margin-right: 15px;
    background-color: #60AD32;
    border-radius: 7px;
    color: white;
    width: 100px;
    margin-top: 0px;
    position: absolute;
}

出现的Div正在移动nephew div（父母孩子）

2 个答案: