title: Strange hover behavior in the sidebar jquery and bootstrap menu
body: <p>I´m doing a big project based on Boostrap 3 template, that uses a lot of jQuery plugins to cover the project needs. Everything is going well!</p>
  
  <p>You can see 3 project sample pages here:</p>
  
  <p><a href="http://www.frontsite.com.br/saam2/index.php?_action=mapa" rel="nofollow noreferrer">www.frontsite.com.br/saam2/index.php?_action=mapa</a></p>
  
  <p><a href="http://www.frontsite.com.br/saam2/index.php?_action=painel" rel="nofollow noreferrer">www.frontsite.com.br/saam2/index.php?_action=painel</a></p>
  
  <p><a href="http://www.frontsite.com.br/saam2/index.php?_action=painel" rel="nofollow noreferrer">www.frontsite.com.br/saam2/index.php?_action=arquivo</a></p>
  
  <p>Both pages has a "left content menu/bar". Its a scrollable containter <code>div</code> with a collapsible list of nested items <code>ul</code> and <code>li</code>, as you can see.</p>
  
  <pre><code>&lt;div class="sidebar-operacional"&gt;
  ...
     &lt;div class="col-md-12 nav-hierarq" id="barra-lateral-operacional"&gt;
  </code></pre>
  
  <p>Each nested item of my list shows a short list of small blue, red and grey <code>span</code> buttons, each one with its self function/action. Doing well!</p>
  
  <p><strong>The problem is - very strange:</strong>
  On Google Chrome (i didnt tested on others), when the items of my list are expanded/opened (it shows the minus sign button in the right), and when I put the mouse hover these small span buttons, its margins becomes to zero, doing an unexpected little movement of them to the left, stacking them. And when the items of my list are collapsed/closed (it shows the plus sign button in the right), and when I put the mouse hover these same span buttons, its margins returns to their original and correct positions. It occurs only with the <code>li</code> items that has children. The deepest <code>li</code> items doesn´t has the same behavior when you put the mouse hover: this should be the right behavior to all!</p>
  
  <p>Strange, no?</p>
  
  <p>I already spent a lot of time investigating what could be happening, whitout solution. So I´d be glad if someone could help me.</p>
  
  <p>Many thanks.</p>
  
  <p>Added on jan 21st:</p>
  
  <p>I think this image can illustrate exatlly what´s/where happening.
  The problem is occuring with the little SPAN buttons: INFO, MAPA, ARQ, COMM.
  Did you try to pass the mouse hover it and see them automatcaly get closer to the nearest SPAN button beside?
  I think its some unexpected CSS class overwriting issue I can´t find or locate! Anyone can help?</p>
  
  <p><img src="https://i.stack.imgur.com/3P9AI.png" alt="Trying to illustrate the problem"></p>