title: Html border-separator in header between ul-li tags
body: <p>Look at my problem:</p>
  
  <p><strong>Now i have:</strong>
  <img src="https://i.stack.imgur.com/5CWqj.png" alt="enter image description here"></p>
  
  <p><strong>What i need to do:</strong>
  <img src="https://i.stack.imgur.com/gHkYe.jpg" alt="enter image description here"></p>
  
  <p>I tryed to do with border, but nothing happends.</p>
  
  <p><strong>Here is my code:</strong></p>
  
  <pre><code>&lt;ul id="tabMenu"&gt;
  &lt;li class="dropdown"&gt;&lt;div&gt;&lt;a class="tab1"&gt;&lt;div class="dropdown_text"&gt;поиск по производителю&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;div&gt;&lt;a class="tab2"&gt;&lt;div class="dropdown_text"&gt;поиск по назначению&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;div id="menu_logo"&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;div&gt;&lt;a class="tab3"&gt;&lt;div class="dropdown_text"&gt;кабинет&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;div&gt;&lt;a class="tab5"&gt;&lt;div class="dropdown_text"&gt;сравнение&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;li class="dropdown"&gt;&lt;div&gt;
  &lt;span id="more_search"&gt;&lt;/span&gt;&lt;a class="tab4" href="/emarket/cart/"&gt;&lt;div class="dropdown_text"&gt;покупки&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Here is CSS:</strong></p>
  
  <pre><code>ul li {
  display: inline-block;
  }
  
  ul li a {
  color: #ccc;
  white-space: nowrap;
  text-decoration: none;
  padding-top: 55px;
  }
  
  ul li a div.dropdown_text {
  display: inline-block;
  }
  
  div.site_info ul li a.tab1  (etc for a.tab2, a.tab3, a.tab4) {
  float: left;
  margin-left: 89px;
  background: url(/img/new_desing/producers.png) no-repeat top center;
  }
  </code></pre>
  
  <p>Help me please to solve this problem.</p>