Как поправить стиль меню — добавить полоску между пунктами?

Question

[Антон]

Не могу сообразить как добавить полоску между пунктами

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}
#menu  {
        background: #f8f8f8;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(236, 237, 237, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    display: table;
    list-style: outside none none;
    margin: 0 auto;
    padding: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    visibility:visible;
}

#menu li {
        display:block;
        float: left;
        position:relative;
}

#menu li a {
        display:table;
        margin-left: 30px;
        height: 50px;
        text-align: left;
        font:600 16px/50px arial;
        color: #303748;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
        text-decoration: none;
        transition: 0.5s;
        -webkit-transition:0.5s;
}

#menu li:first-child a {
    border-left: medium none;
}
#menu li:last-child a {
    border-right: medium none;
}

#menu li:hover a {
    background: #ffff;
    box-shadow: 0 0 0px rgba(0,0,0,0.3)inset;
}
#menu li:hover .sub-menu a {
    background: #fff;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
        box-shadow: 0 0px 0px rgba(0,0,0,0.1);
}

#menu li:hover .sub-menu a:hover {
    color: #df4706;
}

/* стили для выпадающего списка */

.sub-menu {
  visibility:hidden;
  opacity:0;
  position:absolute;
  z-index:-1;
  transition:visibility 0s linear 0.5s, opacity 0.5s linear;
  left: 0;
}

#menu li:hover > ul{
   visibility:visible;
   opacity:1;
   transition-delay:0s;
   z-index:1;
}

#menu .sub-menu li {
    float:none ;
        border-top:1px solid #dddddd;
}

#menu .sub-menu li a {
        width: auto;
        min-width: 100%;
        padding: 0 11px;
        white-space:nowrap;
        text-align:left;
        border:none;
        box-shadow:none;
}

#menu li a:hover + .sub-menu, .sub-menu:hover {
        display: block;
}

/* стили для адаптивности */

@media screen and (max-width : 9760px){

.sub-menu {
        position: static;
        display: none;                
}

.sub-menu li {
        margin-bottom: 1px;
}
#menu li, #menu li a {
        width: 100%;
        border:none;
        padding:0px;
}
        
#menu .sub-menu li a {
        padding:0px;
}
        
#menu  {
    width: 100%;
    }
}

<ul id="menu">
   <li><a href="#">ПУНКТ</a></li>
   <li><a href="#">ПУНКТ2</a></li>

        <li>
            <a href="#">ППП6 &rsaquo;</a>
               <ul class="sub-menu">
                  <li><a href="#">Личный опыт</a></li>
                  <li><a href="#">Чужой опыт</a></li>
                   <li><a href="#">Неизвестный опыт</a></li>
               </ul>
        </li>
        <li>
             <a href="#">РЕЦЕПТ &rsaquo;</a>
                <ul class="sub-menu">
                   <li><a href="#">Для новичка</a></li>
                   <li><a href="#">Опытного пользователя</a></li>
                    <li><a href="#">И еще для кого-то..</a></li>
                </ul>
        </li>
        <li><a href="#">ДОСТАВКА</a></li>
        <li><a href="#">ОПЛАТА</a></li>
</ul>

Answer 1

[Ankhena]

li:not(:last-child) {border-bottom:1px solid #eee;}

Comments

[Антон]

не выходит
https://codepen.io/anon/pen/vWLvoQ

[Ankhena]

anton99zel, не знаю, у меня выходит https://codepen.io/anon/pen/WXrPbv

[Антон]

Ankhena, огромное спс. А как сделать эту полоску не на всю ширину, а процентов на 90%?

[Ankhena]

anton99zel, задайте границу для ссылки, а не для li, и ширину для ссылки.

Если не подходит (например, потому что кликаться тоже будет 90% от li), то через ::after

[Ankhena]

anton99zel, примерно так https://jsfiddle.net/9br4r7ut/

Answer 2

[Николай]

#menu li или #menu li a, присваиваешь border-bottom:1px solid #000; а у последнего элемента убираешь #menu li:last-child border-bottom: none;