0

CSS 菜单

编辑 所以基本上我能够在html css中创建上面显示的下拉菜单，但是当我将它转换为wordpress主题时，下拉菜单不再起作用，有人可以帮助我吗？感谢！

`关于工作的家

按客户按类别

客户联系`

4

1 回答 1

1

我在这里使用了一个伪元素，该伪元素绝对位于 li 元素的左侧。然后，这会将其向上对接到父 UL 元素的边框。为了让底部 li 上的线与边框底部对齐，我不得不使用 top position 属性将 li 向下撞，所以我添加了一些边距，这样它就不会与它下面的任何东西重叠。

ul{
    padding:16px 8px 0px 0px;
    border-left:1px solid #000;   
}

li{
    display:block;
    padding-left:12px;
    position:relative;
    top:9px;
    height:20px;    
}

除了使用图像，这可能是涉及最少 css 的最简单方法。

http://jsfiddle.net/PfChj/4/

编辑

这是修改后的小提琴。我几乎重做了你的 css，因为我有点难以跟上那些 sub ul 和 li 孩子。有时最好使用类来提高可读性，因此您将不得不重做一些样式。子菜单位于顶部 li 的中心，现在已设置宽度。如果您不希望它位于中心并且您的顶部 li 与链接宽度一起弯曲，您可以修改它。

http://jsfiddle.net/FYnS4/2/

于 2012-10-26T03:09:45.240 回答