css下拉菜单::子菜单在悬停后出现在主菜单中

Question

我已经为我的下拉菜单编写了一个css代码

我的下拉菜单问题是::

1. 当我将鼠标悬停在我的主菜单项目上时（例如，在exapmle第二个“bbbbb”中），它会显示子菜单......这很好..但是它会在主菜单中通过增加其高度来显示
2. 主菜单的背景也成为子菜单的背景，显然我不想那样
3. 在主菜单列表项目中以很多文本开头，我不想要那个
4. 文本在子菜单中对齐
5. 我希望子菜单的内容宽度不超过

我的HTML ::

<div class="menu">
 <ul>
   <li><a href="#">aaaaaaaaaa</a></li>
   <li><a href="#">bbbbbbbbbb</a>
      <ul>
         <li><a href="#">aaaaaaaaaa</a></li>
         <li><a href="#">bbbbbbbbbb</a></li>
      </ul>
   </li>
  </ul>
</div>

我的css ::

.menu{
   width:70%;
   overflow:hidden;
   background:green;
   position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}

请解释我的错误

HERE IS MY FIDDLE

Answer 1

您必须在代码中进行一些更改。
的 Fiddle css

.menu{
 width:70%;
 background:green;
 position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;
position: absolute; margin: -2px 0 0 0; z-index: 11110;}
.menu ul li:hover ul li{ float:none; height:20px; }

<强> Updated Fiddle
更改：
display：inline-block; 占据内部容器的组合宽度 position：relative; 在菜单中使用它会导致外部容器的高度增加 你可以在w3school

阅读

Answer 2

这就是你想要的吗？

http://jsfiddle.net/vcMtv/2/

.menu{
width:70%;
overflow:hidden;
background:green;
position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}