title: Dividers on Horizontal Nav list
body: <p>My task is to input some horizontal bars between links on a simple, unsorted nav list for my company's website.</p>
  
  <p>I've tried each method listed on <a href="https://stackoverflow.com/questions/1936661/vertical-dividers-on-horizontal-ul-menu">Vertical dividers on horizontal UL menu</a> , to no avail. One of the links in that thread led me to <a href="http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/" rel="nofollow noreferrer">http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/</a> , which worked!...kind of.</p>
  
  <p><a href="http://s21.postimg.org/nno183jl3/problems.jpg" rel="nofollow noreferrer">http://s21.postimg.org/nno183jl3/problems.jpg</a></p>
  
  <p>That's what I'm getting right now: the dividers have moved off to the left hand side of the nav list. At this point, I'm a little stumped, so I was hoping you guys could help me out.</p>
  
  <p>Here's the HTML. "cart_count.tpl" is the shopping cart stuff on the right.</p>
  
  <pre><code>&lt;div style=float:right id="topbar"&gt;
   &lt;nav&gt;
    &lt;div id="thisisthecartfunction" style=float:right&gt;
     {include file="cart_count.tpl"}&lt;/div&gt;
    &lt;ul style=float:right&gt;
     &lt;li&gt;&lt;a href="/member"&gt;My Account&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/member_wishlist"&gt;Wish List&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/tracking"&gt;Order Status&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/category/customer-service"&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
   &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS. I know it's a bit long and cluttered.</p>
  
  <pre><code>#container &gt; header &gt; #topbar { width: 100%; background: #f8f8f8; margin: 0 auto;}
  #container &gt; header &gt; #topbar &gt; nav { width: 980px; overflow: hidden; margin: 0px auto;}
  #container &gt; header &gt; #topbar &gt; nav &gt; div &gt; #cartitems {vertical-align: bottom; margin: 3px 0px 10px 10px; }
  #container &gt; header &gt; #topbar &gt; nav &gt; ul {list-style-type: none; margin: 0; padding: 0;}
  #container &gt; header &gt; #topbar &gt; nav &gt; ul &gt; li {display: inline;list-style-type: none;}
  #container &gt; header &gt; #topbar &gt; nav &gt; ul &gt; li+li { border-left: 1px solid #000000 }
  #container &gt; header &gt; #topbar &gt; nav &gt; ul &gt; li &gt; a {display: inline; float: right; background: #f8f8f8; color: #666666; text-decoration: none; vertical-align: bottom; margin: 5px 0px 10px 10px; }
  #container &gt; header &gt; #topbar &gt; nav &gt; ul &gt; li &gt; a:hover { text-decoration: underline; }
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>