стилизация меню css с разделителями разделов и стилями onHover - PullRequest
Новая
       5

стилизация меню css с разделителями разделов и стилями onHover

0 голосов
/ 30 марта 2012

Привет, я делаю меню,

оно построено с использованием UL и LI

Пожалуйста, вы можете посоветовать мне, как я могу сделать строки после каждого li и сделать отступ с этимконкретное изображение маркера.

Вот меню, которое я использую, если вы хотите увидеть код: http://www.dnn -menu.com / superfish / Home.aspx

здесьэто изображение дизайна: enter image description here

1 Ответ

2 голосов
/ 30 марта 2012

Привет, ты можешь сделать это Navi в чистом 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;
}​

и теперь Live демо нажмите здесь http://jsfiddle.net/rohitazad/8abUy/4/

...