title: Wrong padding for background color on ul li:hover in CSS3?
body: <p>I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the <strong>padding</strong> doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user &quot;hovers it&quot; with the mouse. But the padding seems to get wrong.</p>
  <p>Here's my code in CSS (using Sassy CSS):</p>
  <pre><code>/* just to be sure the default of browser doesn't change look */
  * {
      margin:0;
      padding:0;
  }
  
  /* some other design code ... */
  
  #nav-menu {
      padding:5px;
      text-align:center;
      
      /* change background: browser specific gradient */
      background:$menu-bgcolor;
      
      li {
          list-style:none;
          display:inline;
          padding:2px 10px 2px 10px;
          
          :hover {
              background-color:$deco-dark;
              color:$deco-verylight;
          }
      }           
  }
  </code></pre>
  <p>But the result looks something like the following:</p>
  <p><img src="https://i.stack.imgur.com/P9VIc.png" alt="A menu item on hover status -- you can see that padding doesn't cover all li area." /></p>
  <p>As you can see the changed background color, which is <code>$deco-dark</code> in this case, doesn't affect the whole <code>li</code> area (the area with gradient), as i would expect. What can I do to change this behavior?</p>