CSS 下拉菜单未按预期工作

Question

当我将 div(包含下拉菜单)定位到相对位置并将下拉菜单 div 定位到绝对位置时，它只显示下拉菜单中的最后一项。如果我设置下拉菜单容器 div相对并保留下拉菜单 div 定位，然后它起作用。但这会影响页面的其余部分。因此，如何设置使下拉菜单起作用而不影响页面任何其他部分的定位。

HTML

  <div id="top_head">
  My Online Shop
    <div id="nav">
      <div class="test"><a href="home.php">Home</a></div>
      <div class="test" id="product"><a href="produt.php">Products</a>
           <div class="test1"><a href="about.php">shirt</a></div>
           <div class="test1"><a href="about.php">Pant</a></div>
           <div class="test1"><a href="about.php">inner</a></div>
           <div class="test1"><a href="about.php">cap</a></div>
      </div>
      <div class="test"><a href="about.php">About</a></div>
      <div class="test"><a href="contact.php">contact Us</a></div>
    </div>
   </div>

CSS

body{
   color:green;
}
#top_head{
   width:100%;
   height:100px;
   font:48px Arial green;
   border:1px dotted red;

}
#nav{
   background-color:gray;
   width:57%;
   border-radius:5px;
   font:28px Arial orange;
   margin:0px -49px 5px 15px;
}
#nav a{
   color:red;
   text-decoration:none;
   margin:0px 50px;
}
.test{
   float:left;
}
.test:hover{
   background-color:orange;
}
#product{
   position:relative;
}
.test1{
   position:absolute;
   border:1px solid red;
   visibility:hidden;
}
   #product:hover .test1{
   visibility:visible;
   background-color:yellow;
}

我也尝试过显示属性。相同的结果。如果您知道问题出在哪里，请提供帮助。

Answer 1

这里的问题似乎是您在所有子菜单 div 上使用了 position:absolute。这实质上是使它们彼此重叠(将最后一个留在顶部)。

一个解决方案是将所有这些元素包装在一个容器 div 中，并使其成为隐藏或显示的内容:

Working Fiddle Demo

您的子菜单变为:

 <div class="test1">
   <div><a href="about.php">shirt</a></div>
   <div><a href="about.php">Pant</a></div>
   <div><a href="about.php">inner</a></div>
   <div><a href="about.php">cap</a></div>
 </div>

CSS 稍有改动:

.test1{
  display:none;
}

.test1 div{
   border:1px solid red;
}

#product:hover .test1{
 position:absolute;
 display: block;
 background-color:yellow;
}