Question

我想为html页面创建一个可下载的下拉菜单。我创建了我认为正确的HTML / CSS，但悬停项目出现在横幅div的最左侧。我在这里创建了一个'offending'代码的JSFIddle：http://jsfiddle.net/4CCdv/2/

HTML：

<div id="Header">
        <p></p>
        <ul class="Menu">
            <li class="Menu">Home</li>
            <li class="Menu" >Item2
                <ul class="Menu">
                    <li class="Menu">Sub A</li>
                    <li class="Menu">Sub B</li>
                    <li class="Menu">Sub C</li>
                </ul>
            </li>
            <li class="Menu" >Item 3
                <ul class="Menu">
                    <li>Sub A</li>
                    <li>Sub B</li>
                    <li>Sub C</li>
                </ul>
            </li>
            <li class="Menu" >Item 4
                <ul class="Menu">
                    <li>Sub A</li>
                </ul>
            </li>
            <li class="Menu" >Item4</li>
        </ul>
    </div>

CSS：

div {
    border-radius: 5px;
}

#Header {
    z-index: 1;
    position: fixed;
    width: 85.5%;
    margin-top: 20px;
    height: 95px;
    color: white;
    background-color: #0066ff;
    margin-bottom: 15px;
    text-align:center;
}

.Menu {
    background-color: #2fa4e7;
    background: linear-gradient(top, #2fa4e7 0%, #eee9f0 100%);
    border-color: #1995dc;
    border-radius: 8px;
    border-style:ridge;
    border-width:1px;
    display: inline-block;
    font-size: 1.2em;
    font-family: Tahoma, Geneva, sans-serif;
    list-style-type: none;
    padding: 5px;
    margin: 0.2em;
    border-bottom: 2px solid #0024d9;
}

.Menu ul {
    display: none;
}

.Menu li:hover > ul {
    display: block;
    font-size: 0.8em;
    font-family: Tahoma, Geneva, sans-serif;
    position: absolute;
    top: -1px;
    left: 100%;
}

我一直在抨击这一段时间，但是无法弄清楚为什么有一个父div或为什么子菜单会尝试出现在它之外。有什么想法吗？

Answer 1

<强> Check out this demo 即可。你必须给父母li position:relative和孩子ul position:absolute

CSS

ul.Menu li {
    position: relative;
}
ul.Menu li:hover > ul {
    display: block;
    font-size: 0.8em;
    font-family: Tahoma, Geneva, sans-serif;
    position: absolute;
    top: 35px;
    left: 0;
}

Answer 2

您必须将相对位置添加到悬停的父元素。这样你就可以根据父元素将子元素定位到整个页面。

这里是：

.Menu li {
    position:relative;
}

现在，您可以使用左，右，上，下来将菜单放在任何地方

CSS下拉菜单 - 子项目显示在Div的最右侧

2 个答案: