Html CSS下拉菜单子项重叠
你好，这是我第一个关于堆栈溢出的问题，所以我希望我能尽可能正确地回答它 我对我的问题做了广泛的研究，主要是阅读了Stack Overflow和其他一些网站上的所有问题，但我找不到一个有效的答案 一些背景：我正试图为我的工作写一个招聘网站，这是我写过的第一个网站。我正在使用wamp服务器在本地主机上运行站点进行测试。我的问题在标题中被描述得尽可能好。下面是我的html代码：Html CSS下拉菜单子项重叠,html,css,Html,Css,你好，这是我第一个关于堆栈溢出的问题，所以我希望我能尽可能正确地回答它 我对我的问题做了广泛的研究，主要是阅读了Stack Overflow和其他一些网站上的所有问题，但我找不到一个有效的答案 一些背景：我正试图为我的工作写一个招聘网站，这是我写过的第一个网站。我正在使用wamp服务器在本地主机上运行站点进行测试。我的问题在标题中被描述得尽可能好。下面是我的html代码： <html> <head> <title> BCB Call Plus SRL Home
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> <a href= "Main.html"> Home </a> </li>
<li> <a href= "Page1.html"> Menu 1 </a> </li>
<li> <a href= "Page2.html"> Menu 2 </a> </li>
<li> <a href= "Page3.html"> Menu 3 </a> </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li><a href="Page41.html">Ce Vrem</a></li>
<li><a href="Page42.html">Aplica</a></li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
这是一本书 我对您的css代码做了一些调整：
正文{
文本对齐：居中；
}
a{
字体大小：150%；
文字装饰：无；
颜色：#000000；
字体大小：粗体；
垂直对齐：中间对齐；
padding:0px 10px；/*这只是为了让悬停效果在html中丢失空格*/
}
a:悬停{
背景色：#338533；
}
保险商实验室{
填充：0；
保证金：0；
}
ul#导航集装箱{
背景色：#F2FFF2；
列表样式类型：无；
文本对齐：居中；
}
ul#nav#U集装箱李{
显示：内联块；
左侧填充：5px；
右侧填充：5px；
位置：相对位置；
}
#angajari ul.sub_菜单{/*使用菜单执行此操作，而不仅仅是链接*/
显示：无；
位置：绝对；/*设置正确的位置*/
}
#angajari ul.sub_菜单li{
显示：内联块；
}
#angajari ul.sub_菜单li a{/*我们不想要top:0，因为它不应该重叠*/
空白：nowrap；
}
#angajari:悬停ul.sub_菜单{/*参见上文->菜单非链接*/
显示：块；
}
-
-
-
-
-
-
-
-
这是一个标题
这是一个段落。li a.sub_menu {
position:absolute;
}
.sub_菜单.relative这两个示例的演示：所以我试图解决您的问题，最后得到了这个结果 我已经调整了徽标的边距，如下所示：
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
所以我做了一些小改动，但我不知道这是否是你想要的。
在这里输入code#angajari ul.sub_菜单中失去了位置：绝对，它会工作吗？@Wavemaster如果我这样做，它会把它们放下来，但它会把它们放在一行，而不是放在两行。当然，这是一个开始，但这不是我想要的；i、 两个子菜单显示一个在另一个下面。这个答案很有效，非常感谢。你能提供一些关于为什么这一改变有效的见解吗？@CSTroll通过一个示例演示给出了解释。你现在明白了吗？是的，就像我以前读过的一样，但没有正确理解。最好解释一下你改变了什么，而不仅仅是邮政编码。是的，很抱歉，错过了。
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}