title: How to highlight a whole cell when hovering over link
body: <p>I have a horizontal nav bar where I would like to highlight the entire cell the link is in when I hover over the link, however, I can only get the immediate area around the text to highlight. I would greatly appreciate any pointers on how I can achieve this.</p>
  
  <p>Here is my JS Fiddle: <a href="http://jsfiddle.net/PYKXb/1/" rel="nofollow">http://jsfiddle.net/PYKXb/1/</a></p>
  
  <p>This is my CSS code:</p>
  
  <pre><code>#horizontal-style {
      display: table;
      width: 100%;
      margin:0px;
      padding-top:0px;
      padding-bottom:0px;
      padding-left:0px;
      padding-right:0px;
  }
  
  #horizontal-style li {
      display: table-cell;
      vertical-align:middle;
      height:auto;
      padding:1%;
  }
  
  #horizontal-style a:link {
      display: block;
      border: none;
      text-align: center;
      margin:auto;
      padding:none;
      background:#ebebec;
      color:#005da4;
      text-decoration:none;
      font-family: Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size:90%;
      display:inline-block;
      vertical-align:middle;
  }
  
  #horizontal-style a:visited {
      display: block;
      border: none;
      text-align: center;
      margin:auto ;
      padding:none;
      background: #ebebec;
      color:#005da4;
      text-decoration:none;
      font-family: Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size:90%;
      display:inline-block;
      vertical-align:middle;
  }
  
  #horizontal-style a:hover {
      display: block;
      border: none;
      text-align: center;
      margin:auto ;
      padding:none;
      background: #acce39;
      color:#005da4;
      text-decoration:none;
      font-family: Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size:90%;
      display:inline-block;
      vertical-align:middle;
  }
  
  #horizontal-style a:hover {
      display: block;
      border: none;
      text-align: center;
      margin:auto ;
      padding:none;
      background: #acce39;
      color:#005da4;
      text-decoration:none;
      font-family: Arial, Helvetica, sans-serif;
      font-weight:bold;
      font-size:90%;
      display:inline-block;
      vertical-align:middle;
  }
  </code></pre>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;ul id="horizontal-style"&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&lt;br /&gt;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&lt;br/&gt;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;/ul&gt;
  </code></pre>