Question

美好的一天，这是我有关Stack Overflow的第一个问题，所以我希望尽可能正确。

我对我的问题进行了大量的研究，主要是阅读我在Stack Overflow和其他一些网站上可以找到的所有问题，但我找不到一个有效的答案。

一些背景：我正在努力为我的工作编写一个招聘网站，这是我写过的第一个网站。我正在使用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。

Answer 1

你需要你的.sub_menu是绝对的，而不是你的li a。那就是它！

.sub_menu {
    position:absolute;          
}

此处的演示演示：Derive4J

我会隐藏.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。现在Link 1在相对div下面了。链接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/pxzhqqnb/1/

Answer 2

我对你的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>

Answer 3

所以我试着修复你的问题我最终得到了这个结果

enter image description here

我调整了徽标的边距，如下所示：

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

因为我调整了文本容器的宽度并替换了CSS CODE中的最后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

CSS下拉菜单子项重叠

3 个答案: