0

我想为 html 页面创建一个可悬停的下拉菜单。我创建了我认为正确的 HTML/CSS，但悬停项出现在横幅 div 的最左侧。我在这里创建了一个“违规”代码的 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 或为什么子菜单会尝试出现在它之外。有任何想法吗？

4

2 回答 2

3

看看这个演示。你必须给父母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;
}
于 2013-09-28T04:36:39.163 回答
1

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

这里是：

.Menu li {
    position:relative;
}

现在您可以使用左、右、上、下来将菜单放置在您想要的任何位置

于 2013-09-28T04:25:54.980 回答