title: My navigation list is overlapping padding. How can I prevent this?
body: <p>I am trying to make a navigation that highlights the area around the link when you hover over it, and allows you to click on the any area of the highlight to follow that link. It seems that my padding is overlapping and you can only click on the padding to the left of the link, whereas the padding on the right becomes the left padding of the link the the right.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/Hh7XG/1/" rel="nofollow">http://jsfiddle.net/Hh7XG/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="menubar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=# &gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Online Courses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Registration&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Faculty&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Calendar&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Store&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Testimonials&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Online Lectures&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=# &gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input class="searchbox" trype="text" value="Search" onfocus="this.value='';" onblur="if(this.value=='') this.value='Search';"/&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menubar{
  height:auto;
  background:#ebebec;
  margin-top:0px;
  padding-top:0px;
  padding-left:0px;
  }
  ul{
  list-style-type:none;
  padding:0px;
  margin:0px;
  }
  #menubar ul li{
  text-decoration:none;
  color:#005da4;
  text-align:center;
  margin:none;
  width:auto;
  padding-left:0;
  padding-right:0;
  float:left;
  }
  #menubar ul li:hover a{
  background:#acce39;
  }
  #menubar ul li a{
  text-decoration:none;
  color:#005da4;
  display:block;
  width:100%;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
  text-align:center;
  margin-left:0;
  margin-right:0;
  }
  .searchbox
  {
      -moz-border-radius: 15px;
      border-radius: 15px;
      border:solid 1px black;
      padding:5px;
      margin:5px;
      margin-left:15px;
      align:left;
  }
  </code></pre>
  
  <p>(Sorry if the below does not make sense. I would be more than happy to clarify.)</p>
  
  <p>I want it to display like this: (| is the border between li's)</p>
  
  <pre><code>|    Link    |    Link    |    Link    |
  </code></pre>
  
  <p>When I hover over the padding to the right of the leftmost link, I would like it to look like this: (X is the highlight, ^ is my mouse)</p>
  
  <pre><code>|XXXXLinkXXXX|    Link    |    Link
             ^
  </code></pre>
  
  <p>but it is acting like this:</p>
  
  <pre><code>|    Link|    Link|    Link    |   
  </code></pre>
  
  <p>When the mouse is hovering over the leftmost link the highlight looks like this:</p>
  
  <pre><code>|XXXXLinkXXXX|Link    |    Link
      ^
  </code></pre>
  
  <p>but when I hover over the padding to the right of of the link it looks like this:</p>
  
  <pre><code>|    Link|XXXXLinkXXXX|Link    |
             ^
  </code></pre>