菜单栏悬停不变形答案

【问题标题】：menu bar hover without distortion菜单栏悬停不变形
【发布时间】：2015-01-23 10:24:36
【问题描述】：

我正在制作导航菜单。我现在一切正常，但是当子菜单弹出时，所有的 html 都在扭曲。下面的所有div都在下降。有人可以帮助我吗？这是带有 CSS 的 html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    #body
    {
        width: 1200px;
    }
    ul{
        padding: 0;
        list-style: none;
    }
    ul li{
        float: left;
        width: 100px;
        text-align: center;
    }

    ul li a{
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul{
        display: none;
    }
    ul li:hover ul{
        display: block; /* display the dropdown */
    }
    #uldiv
    {
        width:1200px;
        float:left;
    }
    #secdiv
    {
        width:1200px;
        float:left;
    }
</style>
</head>
<body>
    <div id="uldiv">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products</a>
            <ul>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="secdiv">
        here some text whish will not move while the menu is popping up.
    </div>
</body>
</html>

【问题讨论】：

标签： html css menu hover submenu

【解决方案1】：

你需要添加：

ul li:hover ul {
    display: block; /* display the dropdown */
    position:absolute; /* <--- this line */
}

取子菜单out of the document flow，不往下推。

您还需要添加：

ul li ul li{
    float:none;
}

这样子菜单项就不会显示在同一行并相互堆叠。

DEMO

完整代码：

#body {
    width: 1200px;
}
ul {
    padding: 0;
    list-style: none;
}
ul li {
    float: left;
    width: 100px;
    text-align: center;
}
ul li a {
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}
ul li ul {
    display: none;
}
ul li:hover ul {
    display: block;
    /* display the dropdown */
    position:absolute;
}
ul li ul li{
    float:none;
}
#uldiv {
    width:1200px;
    float:left;
}
#secdiv {
    width:1200px;
    float:left;
}

<div id="uldiv">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Laptops</a>
                </li>
                <li><a href="#">Monitors</a>
                </li>
                <li><a href="#">Printers</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>

【讨论】：

【解决方案2】：

将position:absolute 给ul

Fiddle

ul li ul {
    position:absolute;
    display: none;
}

【讨论】：

您删除了下拉菜单的对齐方式...再次检查小提琴！ :)
@NoobEditor 什么对齐？我觉得很好
检查子菜单...它在单行中显示项目...不是以下拉方式...查看细节朋友！ :)
@NoobEditor 明白了，这是因为屏幕分辨率，当我调整大小时会发生同样的事情，感谢您注意到它
让我们continue this discussion in chat.