0

我正在尝试创建 2 级下拉菜单。我有点靠近并卡住了。请协助我完成它。

这是JsBin

 li{list-style:none;line-height:30px;}
 a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
 a:hover{color:white;}

 li{padding:5px;background-color:#5970B2;}

 /*li*/a:hover{background-color:grey;}
 ul#sddm{position:relative;}

 ul#sddm ul{display:none;}

 ul#sddm>li{float:left;}

 ul#sddm>li:hover>ul 
 {white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}


 ul#sddm ul li:hover ul
 {white-space: nowrap;display:block;margin-left:150px;
   position:absolute;margin-top:0;padding:0;}

 ul#sddm ul li:hover ul>li{}

如果有人解释我做错了什么，这对我有好处..

提前致谢。

4

2 回答 2

1

这是演示http://jsfiddle.net/dineshswami/4pLt3/1/的小提琴

css的变化：

a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}

ul#sddm>li{float:left; position:relative;}

ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}

html 的变化：我删除了内联 css

问题：问题是您通过提供内联 css 来强制元素，因此它们无法正确对齐到它们想要的位置。你提到绝对的位置变化不大。所以我改变了你可以在上面的 CSS 中看到的 left 和 top 值。

正如我上面提到的问题，让我详细解释一下：

  1. 要将标签扩展到<a>标签的整个宽度，<li>我刚刚删除了 csswidth: 100%;并添加了新的 css 规则display:block;padding:2px;

  2. 为了调整第一个下拉宽度，我从 html 中删除了整个内联 css。因此所有元素都能够根据文本占据整个宽度。

  3. 要调整第二级下拉，我将顶部和左侧属性设置为left:-2px;margin-top:-39px;为什么我这样做，因为在第一级下拉和第二级之间存在间隙，并且 margin-top 为 -39px，因为你已经给出了 line-height:30px; 这增加了高度，所以我设置了边距顶部。

于 2012-12-15T09:13:08.077 回答
0

更改顶部和左侧属性以调整我已编辑jsdin

于 2012-12-15T09:23:14.303 回答