带有下拉垂直线的CSS菜单

Question

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

`主页关于 工作

    由客户     按类别

客户 联系 `

Answer 1

我在这里使用绝对位于li元素左侧的伪元素。然后将其对接到父UL元素的边界。为了让底部的线条与边框的底部对齐，我不得不用顶部位置属性撞击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，因为跟我所有那些亚儿和小孩子关系有点困难。有时最好使用一个类来实现可读性，所以你将不得不重做一下你的风格。子菜单位于顶部li的中心，现在具有设定宽度。如果您不希望它位于中心，而您的顶部li用链接宽度进行弯曲，则可以对其进行修改。

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