css - Html border-separator in header between ul-li tags -

look @ problem:

now have:

what need do:

i tryed border, nothing happends.

here code:

<ul id="tabmenu"> <li class="dropdown"><div><a class="tab1"><div class="dropdown_text">поиск по производителю</div></a></div></li> <li class="dropdown"><div><a class="tab2"><div class="dropdown_text">поиск по назначению</div></a></div></li> <li class="dropdown"><div id="menu_logo"></div></li> <li class="dropdown"><div><a class="tab3"><div class="dropdown_text">кабинет</div></a></div></li> <li class="dropdown"><div><a class="tab5"><div class="dropdown_text">сравнение</div></a></div></li> <li class="dropdown"><div> <span id="more_search"></span><a class="tab4" href="/emarket/cart/"><div class="dropdown_text">покупки</div></a> </div></li> </ul> 

here css:

ul li { display: inline-block; }  ul li { color: #ccc; white-space: nowrap; text-decoration: none; padding-top: 55px; }  ul li div.dropdown_text { display: inline-block; }  div.site_info ul li a.tab1  (etc a.tab2, a.tab3, a.tab4) { float: left; margin-left: 89px; background: url(/img/new_desing/producers.png) no-repeat top center; } 

help me please solve problem.

if shadow wanted apply style div

box-shadow: 0px -3px 5px #888888; 

or change values till u effect..

edit

if want shadow effect inside div use

box-shadow: inset 0px -3px 5px #888888; 

edit

for separator use this

nav li + li:before{ content: " | "; padding: 0 10px; } 

i got through this link