Question

当我将div（包含下拉菜单）定位到relative并且下拉菜单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;
}

CSS下拉菜单无法按预期工作

1 个答案: