title: Putting padding within the <a> inside an <li> element
body: <p>I'm trying to put some padding on the link within an <code>&lt;li&gt;</code> on <a href="http://tyler.brixwork.com" rel="nofollow">http://tyler.brixwork.com</a> - but I'm having no luck. <strong>Shrink the browser so the media queries will kick in - emulating a vertical iPhone screen.</strong> I want the menus to stack on top of each other. What's happdning is, the <code>&lt;LI&gt;</code> element is not expanding with the added padding of the <code>&lt;a&gt;</code> element, causing the menus to basically overlap, and the <code>border-bottom:1px solid #fff</code> of the <code>&lt;LI&gt;</code> element is covered up by the next <code>&lt;li&gt;&lt;a&gt;&lt;/LI&gt;</code> element. </p>
  
  <p>The menu HTML looks like this:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/about"&gt;about me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/listings"&gt;listings&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="http://tyler.brixwork.com/area-map"&gt;On A Map&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://tyler.brixwork.com/listings"&gt;My Listings&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/mls-search"&gt;MLS&amp;reg; search&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/resources"&gt;resources&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="http://tyler.brixwork.com/for-buyers"&gt;for buyers&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://tyler.brixwork.com/for-sellers"&gt;for sellers&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/blog"&gt;blog&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://tyler.brixwork.com/contact"&gt;contact me&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Really a sipmle menu structure with some sub menus. The problem lies here, where I'm using media queries to stack all the menus on top of each other, and disable the submenus on iphones etc.:</p>
  
  <pre><code>/* All Mobile Sizes (devices and browser) */
      @media only screen and (max-width: 767px) {
          #menu {
              height: auto;
          }
  
          #menu li:hover .submenu {
              left: -9999px;
          }
  
  
          .container .columns.hide_below_tablet, .container .column.hide_below_tablet {
              display: none;
          }
  
          /* configure footer stuff */
          #footer_signupform h4, #footer_signupform p, #footer_signupform form {
              padding-left: 10px;
              padding-right: 10px;
          }
  
  
          #site_credits {
              text-align: left;
          }
  
      }
  
      /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
      @media only screen and (min-width: 480px) and (max-width: 767px) {
  
          #index_slide {
              height: 134px;
          }
  
          #menu {
              text-align: left;
              background: none;
              display: block;
          }
  
          #menu li {
              margin-right: 10px;
              margin-left: 0px;
              text-align: left;
              width: 120px;
              display: block;
              float: left;
              border: none;
              display: block;
          }
  
          #menu li:hover {
              border: none;
          }
  
      }
  
      /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
      @media only screen and (max-width: 479px) {
          #index_slide {
              height: 96px;
          }
  
          #top_phone {
              font-size: 18px;
          }
  
          #menubar #menu li {
              width: 100%;
              border: 1px solid #fff;
              margin: 0px;
              float: left;
              clear: both;
              display: block;
          }
  
          #menubar #menu li a:link, #menubar #menu li a:visited {
              color: #fff;
              background-color: #333;
              width: 100%;
              white-space: nowrap;
              display: block;
              font-size: 20px;
              float: left;
              clear: both;
              padding: 5px;
          }
  
          #footer_nav ul li {
              text-align: center;
              width: 100%;
              display: block;
              clear: both;
          }
  
      }
  </code></pre>