title: css: Image after li element goes to new line
body: <p>I've a problem with inserting an image after every element in my list. I used ":after" and it shows me the image but instead of after every element, the images are with a new linebreak under every element:</p>
  
  <p>Should be (|=image):
  Site1 | Site2 | Site...</p>
  
  <p>Reality:
  Site1 Site2 Site3
  |     |     |</p>
  
  <p>Following my css code, maybe someone can help:</p>
  
  <pre><code>/* Navigation */
  #nav {
      position:relative; 
      height:70px;
      background:#191919;
      position:relative;
  }
  
  /* The main menu */
  .menu{
      list-style: none; 
      position: relative; 
      float: left; 
      display: block; 
      left: 50%;
      padding-top:20px;
   }
  
  /* First level of navigation */ 
  .menu li{
      position: relative; 
      float: left; 
      display: inline; 
      right: 50%;
      padding-right:15px;
        }
  
  .menu li a{
      display:inline;
      width:auto;
      word-wrap: break-word;
      text-shadow: none; 
      color:#FFF;
      text-decoration:none;
      font-size:14px;
      font-weight:normal;
       }
  
  .menu li:after {
      display: block;
      content: "";
      width: 5px;
      height: 50px;
      background: transparent url('../images/nav_bar_line.png') no-repeat;
  }
  </code></pre>