title: Make A List Item Clickable (HTML/CSS)
body: <p>So I'm trying to make each list-item on <a href="http://whattotaketocollege.com" rel="noreferrer">my site</a> clickable but I'm not sure what is the best way to do it. Please help me out.</p>
  
  <p>So here is the relevant HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Backpack &lt;a href="#" title="Buy on Amazon" target="_blank"&gt;&lt;img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;!-- More List Items --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the relevant CSS:</p>
  
  <pre><code>.content ul li {
      display:block;
      list-style:none;
      padding:5px 10px 5px 15px;
  }
  
  .content li li {
      // This is for when there are sub-categories.
      border-bottom: none;
      border-top: 1px solid #f8d9d0;
      margin: 3px -10px -3px -15px;
      padding: 5px 0px 5px 30px;
  }
  
  .buy {
      float: right;
      margin-top: -2px;
  }
  
  // The next ones all deal with the shopping cart icon that appears only on hovers.
  
  .listblock ul li img { 
      visibility: hidden;
  }
  
  .listblock ul li:hover img { 
      visibility: visible;
  }
  
  .listblock ul li ul li img { 
      visibility: hidden !important;
      margin-right: 10px;
  }
  
  .listblock ul li ul li:hover img { 
      visibility: visible !important;
      margin-right: 10px;
  }
  </code></pre>
  
  <p>How can I make the whole list-item clickable and still have the shopping cart icon and Google Analytics Event tracking still work? Is there some jQuery magic I can use?</p>
  
  <p>I've tried using display:block for the Amazon links, but that seems to mess up the image placement.</p>
  
  <p>Thank you so much!</p>