CSS下拉填充无法正常工作

我制作了一个简单的CSS下拉菜单，但我面临一些填充问题。当我将鼠标悬停在某个元素上时，我希望新的背景颜色能够很好地填充整个元素，但现在它仅限于文本。有人能看一下并告诉我出了什么问题吗：

HTML:

<ul id="navbar">
    <li><a href="#">Attendance</a>
        <ul>
            <li><a href="#">Upload</a></li>
            <li><a href="#">Report</a></li>
        </ul>
    </li>
    <li><a href="#">Leave</a>
        <ul>
            <li><a href="#">Report</a></li>
            <li><a href="#">Holidays</a></li>
        </ul>
    </li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Log out</a></li>
</ul>

/* http://meyerweb.com/eric/tools/css/reset/ 
 *  v2.0 | 20110126
 *  License: none (public domain)
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
        content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ========= End of CSS Reset ============ */


#navbar {
    margin: 20px 0px;
    background-color: #444;
}

#navbar a {
    text-decoration: none;
    color: #fff;
}

#navbar a:hover {
    background-color: #AAA;
    color: #000;
}

#navbar li {
    display: inline-block;
    position: relative;
    padding: 10px;
}

#navbar li ul {
    background-color: #444;
    position: absolute;
    display: none;
}

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

更改此项：

#navbar a:hover {

为此：

#navbar li:hover {

---

这样，整个

li

元素将在悬停时发生变化，而不仅仅是锚

a

在

li

上应用悬停

/*http://meyerweb.com/eric/tools/css/reset/ 
*v2.0 | 20110126
*许可证：无（公共域）
*/
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，address，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，dd，ol，ul，li，fieldset，form，label，ledge，table，table，table，table，title，tbody，tfoot，thead，tr，th，th，td，article，article，side，canvas，detail，detail，bed，bedded，str，组、菜单、导航、输出、ruby、节、摘要、时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章、旁白、详细信息、图表、页脚、页眉、H组、菜单、导航、章节{
显示：块；
}
身体{
线高：1；
}
ol,，
保险商实验室{
列表样式：无；
}
块引用，
q{
报价：无；
}
blockquote:before，blockquote:after，q:before，q:after{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
/*================CSS重置结束===============================*/
#导航栏{
利润率：20px 0px；
背景色：#444；
}
#导航栏a{
文字装饰：无；
颜色：#fff；
}
#导航栏李：悬停{
背景色：#AAA；
颜色：#000；
}
#纳瓦尔{
边缘顶部：10px；
左边距：-10px；
}
#李国宝{
显示：内联块；
位置：相对位置；
填充：10px；
宽度：70px；
文本对齐：居中；
}
#纳瓦尔{
背景色：#444；
位置：绝对位置；
显示：无；
}
#导航栏li：悬停>ul{
显示：块；
}

从

li

中移除填充物，并将其添加到

a

以及

显示：块

（也在锚上）

---

但是第二级元素出现了问题。例如，请看下面的上传。为什么右边有多余的空间？那是因为

li

元素没有填满整个区域。那是完全不同的问题。我来看看。添加以下内容后，它得到了修复：

#navbar li>ul>li{display:block；}

此行：

#navbar li>ul>li

表示样式将应用于以这种方式嵌套的元素：

这些元素的CSS规则

显示：block

确保它们将填充整个区域。明白了吗？是的，我理解选择器，只是读了块级元素。我了解到它们尽可能地左右伸展。谢谢！谢谢，但不知怎的，一级元素彼此重叠。你设置的宽度可能有问题吗？@dotslash-看看这个。