0

我为我的下拉菜单编写了一个 CSS 代码

我的下拉菜单的问题是::

  1. 当我将鼠标悬停在我的主菜单项上时（即在示例中的第二个“bbbbb”），它会显示子菜单...没关系..但是它通过增加它的高度出现在主菜单中
  2. 主菜单的背景也变成了子菜单的背景，显然我不想要那个
  3. 在主菜单列表项中以大量文本-inedent 开头，我不希望这样
  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;}

请解释我的错误

这是我的小提琴

4

2 回答 2

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;}
于 2013-08-10T12:14:15.150 回答
2

您必须对代码进行一些更改。
小提琴 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; }

更新小提琴
更改：
显示：内联块；占据内容器的总宽度。
位置：相对；在菜单中使用它会导致外部容器的高度增加。
你可以在w3school阅读

于 2013-08-10T12:12:44.367 回答