title: CSS adjacent sibling breaks dropdown menu margin
body: <p>I'm attempting to implement a CSS dropdown menu, based on this <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar" rel="nofollow noreferrer">example</a> from w3schools. It is working, but the left margin around the <code>dropbtn</code> class is not the same as the left margin for the simple navigation links(Home, News). As you move from the one list item to another the item implementing the dropdown menu has a black border on the left that I cannot explain.</p>
  
  <p>This behavior started when I attempted to implement a divider between the items using li+li:before as shown <a href="http://www.w3schools.com/code/tryit.asp?filename=FBGF7020T28C" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>default.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles/style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
              &lt;a href="javascript:void(0)" class="dropbtn"&gt;Dropdown&lt;/a&gt;
              &lt;div class="dropdown-content"&gt;
                  &lt;a href="#"&gt;Link 1&lt;/a&gt;
                  &lt;a href="#"&gt;Link 2&lt;/a&gt;
                  &lt;a href="#"&gt;Link 3&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;h3&gt;Dropdown Menu inside a Navigation Bar&lt;/h3&gt;
      &lt;p&gt;Hover over the "Dropdown" link to see the dropdown menu.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }
  
  li {
      float: left;
  }
  
  li+li:before {
      color: white;
      content: "|";
  }
  
  li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
      background-color: red;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  </code></pre>