Разделить списки li между собой вертикальными линиями

@Братуха · Регистрация: 15.07.2012

Author24 — интернет-сервис помощи студентам

Привет всем делаю меню и не знаю как разделить каждую ссылку между собой нарисованной вертикальной линей. то есть что то такое
главная l контакты l личный кабинет l выход. Только вместо этих разделений надо использовать 3-х пиксильную нарисованную линию, но так что бы при наведении на ссылку обрамление при нажатии закрывало часть этой картинки, а то я как не пробовал эта 3-х пиксельная линия все время сверху всегою Вот часть меню если поможет

CSS

#menu {
    list-style:none;
    width:1040px;
    height:42px;
    padding:0px 20px 0px 20px;
    margin-top: 0px;
    background: url(../images/menu/bg_hor.gif);
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
}
 
#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:-5px;
    margin-top:7px;
    border:none;
}
 
#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
 
#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #000000;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #fff;
}

Зарание большое спасибо

@newJS · 15.12.2012, 20:22

Может бордюр использовать вместо картинки?
как то так

CSS

1 2	li {border-right:3px solid red;} li:first-child {border:0;}

	15.12.2012, 20:22

Опции темы