html-lists - 使用部分分隔符和 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/