将填充放在<a> inside an <li> element</li></a>内

Question

我正试图在http://tyler.brixwork.com <li>内的链接上添加一些填充 - 但我没有运气。 缩小浏览器以便媒体查询启动 - 模拟垂直iPhone屏幕。我希望菜单叠加在一起。令人高兴的是，<LI>元素没有使用<a>元素的添加填充进行扩展，导致菜单基本重叠，border-bottom:1px solid #fff元素的<LI>是由下一个<li><a></LI>元素覆盖。

菜单HTML如下所示：

<ul id="menu">
    <li><a href="http://tyler.brixwork.com/about">about me</a></li>
    <li><a href="http://tyler.brixwork.com/listings">listings</a>
        <ul class="submenu">
            <li><a href="http://tyler.brixwork.com/area-map">On A Map</a></li>
            <li><a href="http://tyler.brixwork.com/listings">My Listings</a></li>
        </ul>
    </li>
    <li><a href="http://tyler.brixwork.com/mls-search">MLS&reg; search</a></li>
    <li><a href="http://tyler.brixwork.com/resources">resources</a>
        <ul class="submenu">
            <li><a href="http://tyler.brixwork.com/for-buyers">for buyers</a></li>
            <li><a href="http://tyler.brixwork.com/for-sellers">for sellers</a></li>
        </ul>
    </li>
    <li><a href="http://tyler.brixwork.com/blog">blog</a></li>
    <li><a href="http://tyler.brixwork.com/contact">contact me</a></li>
</ul>

真的是带有一些子菜单的sipmle菜单结构。问题出在这里，我正在使用媒体查询将所有菜单堆叠在一起，并禁用iphone上的子菜单等。

/* 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;
        }

    }