برای اینکه تگ های a شما بصورت کامل li را بگیرند میبایست به تگ های a عرض و padding دهید، به مثال زیر توجه کنید :

کد html :

        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>

کد css :

#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#menu a:link, a:visited {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #2190bf;
    width: 120px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

#menu > ul > li {
    float: left;
}

    #menu > ul > li > ul:before {
        content: "Submenu Follows";
    }

    #menu > ul > li:hover > ul:before {
        background: #19656f;
        opacity: .3;
        width: 100%;
        height: 27px;
        margin: -27px 0 0px;
        text-indent: -9999px;
        display: block;
        content: "Submenu Follows";
    }

    #menu > ul > li > a:hover {
        background-color: #19656f;
    }

    #menu > ul > li:hover > ul {
        display: block;
    }

    #menu > ul > li > ul {
        display: none;
        clear: both;
    }
    #menu > ul > li > ul > li > a {
            background-color: #19656f;
        }
        #menu > ul > li > ul > li > a:hover {
            background-color: #42b1bf;
        }