title: How to remove vertical separators in html bar?
body: <p>I have a horitzontal bar with the following html code in a blog:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menuh {
   background: #D8D8D8;
   float: left;
   list-style: none;
   margin: 0px;
   padding: 1px;
   display:block;
   height:auto;
   text-align:center;
  }
  #menuh li {
   display: inline;
   font: 67.5% Arial, Tahoma, Helvetica, FreeSans, sans-serif;
   text-align: center;
   margin: 0 44px 0 44px;;
   padding: 0px;
  }
  #menuh a {
   background: #D8D8D8
   url()no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; ) bottom right no-repeat;
   color: #0B615E; 
   display: block;
   height: auto;
   text-align: center;
   margin: 0px;
   padding: 5px 23.8px;
   text-decoration: none;
   font-weight: normal;
   font-size: 14px;
  }
  #menuh a:hover {
   background: #A9D0F5 url() bottom center no-repeat;    
   color: #aeaab0    
   padding-bottom: 10px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mh"&gt;
     &lt;ul id="menuh"&gt;
     &lt;li&gt;&lt;a href="http://adress1"&gt;adress1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://adress2"&gt;adress2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://adress3"&gt;adress3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://adress4"&gt;adress4&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The output of this code is:</p>
  
  <p><img src="https://i.stack.imgur.com/DWJCn.png" alt="enter image description here"></p>
  
  <p>I would like to remove those vertical separators, but don't know how. Thanks in advance</p>