title: anchor link nested in a li
body: <p>I'm creating a horizontal menu in my website and everything is OK but one thing. I have a link in each <code>&lt;li&gt;</code> and the color is set to white and <code>li</code> has no background, but in hover I want to set <code>li</code> background to white and links text color to black. The problem is that the width of <code>&lt;a&gt;</code> tags is not the same as <code>&lt;li&gt;</code> and when the mouse is over the part that is in <code>&lt;li&gt;</code> but not in <code>&lt;a&gt;</code> both become white.Anchor links can not have width property as far as I know, and I try different type of tricks but no success.Any idea?</p>
  
  <pre><code>#primary-menu ul li {
      list-style-type: none;
      float: left;
      background-image: url('menu-sep.png');
      background-repeat: no-repeat;
      background-position: right;
  }
  
  #primary-menu li a:hover {
      color: black;
  }
  
  #primary-menu li:hover {
      background-color: white;
      color: black;
  }
  #primary-menu li a {
      color: white;
      text-decoration: none;
      padding-right: 8px;
      margin-right: 8px;
      width: 100%;
      height: 23px;
  }
  </code></pre>
  
  <p>`</p>