Question

我自己得到了，并希望将此留给后来有同样问题的人。因此，无需浪费宝贵的时间来回答这个问题。

好的，所以我有一个固定的底部菜单栏。它有一个弹出菜单，它目前没有被隐藏，因为它还没有必要。此栏固定在页面底部，并有一个弹出框。问题是我无法将弹出窗口放在实际按钮上。
这是我的代码：

HTML

<div id="quickBar">
    <div id="menuCont">

        <div id="quickBarMenu">
            <p>Navigation</p>
            <ul>
                <li><p>Articles</p></li>
                <li><p>Blog</p></li>
                <li><p>Software</p></li>
                <li><p>Featured</p></li>
            </ul>
        </div>

    </div>
</div>

CSS

#quickBar{
    width: 100%;
    height: 50px;
    position: fixed;
    display: absolute;
    z-index: 200;
    bottom: 0;
    background-color: grey;
    background-image: -webkit-linear-gradient(bottom,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: -o-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: -moz-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: linear-gradient(to top, rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%, rgba(59,70,71,0.2) 55%);
    opacity: 0.95;
    display: none;
}

#quickBar > #menuCont{
    width: 960px;
    height: 50px;
    margin: auto;
    color: white;
}

#menuCont > div{
    float: left;
}

#quickBarMenu{
    width: 183px;
}

#quickBarMenu p{
    width: 183px;
    height: 20px;
    padding: 15px 0;
    text-align: center;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}

#quickBarMenu > ul{
    /*display: none;*/
    list-style: none;
}

我希望有人可以帮助我。

Answer 1

好的，我自己通过使用margin-top的负边距并使用值-200px（4 x 50px）来获得它。

页脚菜单＆＃34;下拉菜单＆＃34;显示如上

1 个答案: