如何防止我的水平菜单破坏我的网站布局？

Question

这是 JSfiddle http://jsfiddle.net/sgmxh1hg/

这是HTML：

<header>
    <nav>
        <ul id="menu">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">News</a>
            </li>
            <li id="streams">
                <a href="#">Streams</a>
                <ul id="submenu">
                    <li><a href="#">First link</a>
                    </li>
                    <li><a href="#">Second link</a>
                    </li>
                    <li><a href="#">Third link</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Tournaments</a>
            </li>
        </ul>
    </nav>
</header>

这里是 CSS:

header {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    background: -webkit-linear-gradient(#eeb418, #e59313);
    background: -o-linear-gradient(#eeb418, #e59313);
    background: -moz-linear-gradient(#eeb418, #e59313);
    background: linear-gradient(#eeb418, #e59313);
    margin: 0px;
    padding: 0px;
    font-family:"Verdana", "Arial", sans-serif;
    font-size: 1.4em;
}
ul {
    list-style-type: none;
}
nav ul {
    padding: 0px;
    margin: 0px;
}
nav li {
    float: left;
    line-height: 30px;
    vertical-align: middle;
}
#menu a {
    display: block;
    padding: 0px 10px;
    color: #f4f4f4;
    text-decoration: none;
}
#menu li:hover {
    color: white;
    background: #eeb418;
}
#menu li:hover a {
    color: white;
}
#submenu li {
    float: none;
}
#submenu li {
    float: none;
    display: none;
}
#streams:hover ul li {
    display: block;
}

如果您将鼠标悬停在菜单中的 "Streams" 上，当子菜单出现时，网站的布局就会中断。为什么会发生这种情况，我该如何解决？

Answer 1

实现此目的的最常见方法是对元素进行绝对定位。在这种情况下，您将绝对定位直接 ul 元素。这样做时，该元素实质上已从正常流中移除。因此，将鼠标悬停在菜单上时，其他元素将不受影响，并且不会再破坏您的布局。

Updated Example

#menu > li > ul {
    position: absolute;
    background: #eeb418;
}

如何防止我的水平菜单破坏我的网站布局？

How can I prevent my horizontal menu to break my site layout?

html

css

layout

menu

list