CSS下拉菜单子项重叠

美好的一天，这是我有史以来第一个关于Stack Overflow的问题，所以我希望我尽可能正确地使用它。CSS下拉菜单子项重叠

我已经对我的问题进行了广泛的研究，主要是阅读堆栈溢出和其他网站上的所有问题，但我找不到一个有效的答案。

一些背景：我想写一个网站为我的工作招聘，这是我曾经写过的第一个网站。我正在使用wamp服务器在localhost上运行该站点进行测试。我的问题在标题中被描述得尽可能好。请看下面我的html代码：

<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代码：

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; 
} 
.sub_menu li a{ 
    display:none; 
} 
#angajari ul.sub_menu li { 
    float:left; 
} 
#angajari ul.sub_menu li a { 
    position:absolute; 
    top:0; 
    white-space: nowrap; 
    height:auto; 
} 
#angajari:hover ul.sub_menu li a { 
    display:block; 
}

这里是当我将鼠标悬停在有问题的菜单项会发生什么图片： Display Issue

最后说明：我现在只在Chrome下运行它。我注意到，它不会在IE 8中读取我的css（是的，我使用IE 8，因为我的一个老板希望我们。）跨平台兼容性修补程序是受欢迎的，但不在我目前的问题范围内。我的WAMPSERVER有apache 2.4.9和PHP 5.5.12。

我甚至在一些在线的网站代码测试网站上试过我的代码，这些网站的名字我忘了，并得到了相同的结果。如果您发现我的代码实际显示正确，那么这可能是我的配置问题。

这是jsfiddle。

来源

2015-10-19 CSTroll

，如果你失去了'什么位置：absolute'在'#angajari ul.sub_menu立了'可以吗？ – Wavemaster

@Wavemaster如果我这样做，它会放下它们，但它会将它们放在一行上，而不是分成两行。当然，这是一个开始，但这不是我想要的;即两个子菜单显示一个在另一个之下。 – CSTroll

你需要你的.sub_menu是绝对的，不是你的li a秒。而已！

.sub_menu { 
    position:absolute;   
}

这里工作演示：http://jsfiddle.net/pxzhqqnb/1/

而且我做.sub_menu隐藏的，而不是它的孩子。个人喜好，但我认为它更有意义。

为什么会发生吗？考虑一个简单的例子：（认为.relative为position: relative和.absolute为position: absolute的）

<div class="relative"> 
    Text 
    <div class="absolute">Link 1</div> 
    <div class="absolute">Link 2</div> 
</div>

链接1是绝对的。它搜索最接近的相对元素。那是.relative。现在链接1正好在相对格下。链接2遵循相同的规则，因此两个链接重叠。

现在，让我们改变代码一点：

<div class="relative"> 
    Text 
    <div class="absolute-wrapper"> 
     <div>Link 1</div><!-- these are now static by default --> 
     <div>Link 2</div> 
    </div> 
</div>

绝对的包装是绝对的，所以它搜索最接近.relative元素和右侧下它得到。现在这两个链接都是包装在div中的正常元素，所以它们按预期呈现。

演示这里两个例子：http://jsfiddle.net/w0h7cdhe/2/

来源

2015-10-19 08:00:03

这个答案很有用，非常感谢。你能否提供一些关于这个改变为什么起作用的见解？ – CSTroll

@CSTroll解释给示例演示。你现在明白吗？ –

是的，这是我以前读过的，但没有正确理解。 – CSTroll

我已经做了一些调整你的CSS代码：

body { 
 
    text-align: center; 
 
} 
 
a { 
 
    font-size: 150%; 
 
    text-decoration: none; 
 
    color: #000000; 
 
    font-weight: bold; 
 
    vertical-align: middle; 
 
    padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */ 
 
} 
 
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; 
 
    position: relative; 
 
} 
 
#angajari ul.sub_menu { /* do this with the menu, not just the link */ 
 
    display: none; 
 
    position: absolute; /* set correct position */ 
 
} 
 
#angajari ul.sub_menu li { 
 
    display: inline-block; 
 
} 
 
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */ 
 
    white-space: nowrap; 
 
} 
 
#angajari:hover ul.sub_menu { /* see above -> menu not link */ 
 
    display: block; 
 
}

<div id="main_content"> 
 
    <ul id="nav_container"> 
 
    <li> 
 
     <img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px"> 
 
    </li> 
 
    <li> <a href="Main.html">Home</a> <!-- I've removed the spaced and added the gap in css --> 
 
    </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>

来源

2015-10-19 07:58:23 Wavemaster

更好地解释你改变了什么，而不仅仅是邮政编码。 –

我已经评论了我改变它的代码。 – Wavemaster

是的，我很抱歉，错过了。 –

所以我试图解决您的问题，我结束了这个结果

enter image description here

我已经调整标志的保证金，如下图所示：

<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>

因为我调整文本容器的宽度并替换CSS代码中的最后4行，如下所示：

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; 
}

所以我做了细微的变化，但我不知道这是你想要发生enter code here

来源

2015-10-19 08:28:17

CSS下拉菜单子项重叠

回答

相关问题