Question

我正在制作导航菜单。我现在已经完成所有工作，但是当子菜单弹出时，所有的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>

Answer 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>

Answer 2

将position:absolute提供给ul

Fiddle

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

菜单栏悬停没有失真

2 个答案: