Html 菜单栏悬停不失真_Html_Css_Menu_Hover_Submenu

Html 菜单栏悬停不失真

html css menu

Html 菜单栏悬停不失真,html,css,menu,hover,submenu,Html,Css,Menu,Hover,Submenu,我正在制作一个导航菜单。我现在一切正常，但当子菜单弹出时，所有的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

我正在制作一个导航菜单。我现在一切正常，但当子菜单弹出时，所有的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>


使用CSS显示隐藏下拉列表
#身体
{
宽度：1200px；
}
保险商实验室{
填充：0；
列表样式：无；
}
ulli{
浮动：左；
宽度：100px；
文本对齐：居中；
}
ullia{
显示：块；
填充物：5px10px；
颜色：#333；
背景#f2f2；
文字装饰：无；
}
悬停{
颜色：#fff；
背景#939393；
}
ul li ul{
显示：无；
}
ul-li：悬停ul{
显示：块；/*显示下拉列表*/
}
#乌尔迪夫
{
宽度：1200px；
浮动：左；
}
#副官
{
宽度：1200px；
浮动：左；
}












在这里，当菜单弹出时，一些文本不会移动。

将

位置：绝对给予ul


您需要添加：
ul li:hover ul {
    display: block; /* display the dropdown */
    position:absolute; /* <--- this line */
}

这样子菜单项就不会显示在同一行上，并且彼此堆叠在一起

完整代码：

#主体{
宽度：1200px；
}
保险商实验室{
填充：0；
列表样式：无；
}
ulli{
浮动：左；
宽度：100px；
文本对齐：居中；
}
ullia{
显示：块；
填充物：5px10px；
颜色：#333；
背景#f2f2；
文字装饰：无；
}
悬停{
颜色：#fff；
背景#939393；
}
ul li ul{
显示：无；
}
ul-li：悬停ul{
显示：块；
/*显示下拉列表*/
位置：绝对位置；
}
ulli ulli{
浮动：无；
}
#乌尔迪夫{
宽度：1200px；
浮动：左；
}
#副官{
宽度：1200px；
浮动：左；
}



















在这里，当菜单弹出时，一些文本将不会移动。您删除了下拉列表的对齐方式…再次检查小提琴！：）@NoobEditor什么路线？mecheck子菜单看起来不错…它以单行显示项目…而不是以下拉方式…查看详细信息朋友！）@NoobEditor明白了，这是因为我调整大小时的屏幕分辨率，同样的事情也发生了，谢谢你注意到了我们。
ul li:hover ul {
    display: block; /* display the dropdown */
    position:absolute; /* <--- this line */
}

ul li ul li{
    float:none;
}