title: Menu conflict with border-bottom
body: <p>I want to include a border-bottom-image (the arrow, 159px width).
  Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/yl0JT.png" alt="enter image description here"></p>
  
  <p>But the problem is, that the <code>&lt;li&gt;</code> can't get a width of 159px.</p>
  
  <p><img src="https://i.stack.imgur.com/0KpIS.png" alt="enter image description here"></p>
  
  <p>There are any tricks to represent the border image, without push the other <code>&lt;li&gt;</code> away?</p>
  
  <p>lg cgee</p>
  
  <p>The code of the <code>&lt;li&gt;</code>:</p>
  
  <pre><code>.sub_menu ul li {
      float: left;
      font-family: 'Open Sans',sans-serif;
      font-weight: bold;
      height: 41px;
      margin-right: 20px;
      margin-top: 10px;
  }
  </code></pre>
  
  <p>The code of the active element:</p>
  
  <pre><code>.sub_menu ul .active {
      background-image: url("../images/sub_menu_border_active.png");
      background-position: center 17px;
      background-repeat: no-repeat;
      position: relative;
      z-index: 100;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/KngR5.png" alt="enter image description here"></p>