使用部分分隔符和onHover样式设置css菜单样式

Question

嗨，我正在制作菜单，

它是用UL和LI构建的

请你告诉我如何在每个li之后做行，并用特定的子弹图像进行缩进。

如果您想查看代码，请使用以下菜单：http://www.dnn-menu.com/superfish/Home.aspx

这是设计图像：

Answer 1

你可以用纯CSS制作这个导航

示例是

<强> HTML

<ul class="navi">
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
<li><a href="">Lorem text here</a></li>
</ul>​

Css

  ul.navi{
    margin:10px 0 0 10px;
    width:300px;
}

ul.navi li{
    background:#1f1f1f;
    display:block;
    position:relative;
}
ul.navi li:after{
    position:absolute;
    content:"";
    left:0;
    right:0;
    bottom:0;
    border-bottom:solid 1px #2a2a2a;
    border-top:solid 1px #171717;
}
ul.navi li:last-child:after{
    position:absolute;
    content:"";
    left:0;
    right:0;
    bottom:0;
    border:0;
}

ul.navi li a{
    display:inline-block;
    font-size:14px;
    color:#989898;
    line-height:45px;
    text-decoration:none;
    margin-left:20px;
}
ul.navi li a:hover{
    color:#fff;
}​

现在直播演示click here http://jsfiddle.net/rohitazad/8abUy/4/