Question

我正在尝试创建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{}

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

提前致谢。

Answer 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中可以看到的左边和上边的值。

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

要将<a>代码展开到<li>代码的整个宽度，我刚删除了css width: 100%;并添加了新的css规则display:block;padding:2px;
要调整第一个下拉宽度，我从html中删除了整个内联css。所以所有元素都能够根据文本占据整个宽度。
要调整第二级下拉菜单，我将左上角和左侧属性设置为left:-2px;margin-top:-39px;为什么我这样做是因为第一级下拉和第二级之间存在差距，而下边距为 - 39px，因为你给出了行高：30px;这是增加高度所以我设置了margin-top。

Answer 2

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

css下拉菜单

2 个答案: