造型与部分分压器和onHover选项风格

Question

嗨，我想提出一个菜单CSS菜单，

其内置了UL和LIS

请你能告诉我我如何能每个L1后做线并用该特定的子弹图像进行缩进。

这里，如果你想看到的代码我使用的菜单：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/