ul li上背景颜色的填充错误：在CSS3中悬停？

Question

我尝试使用CSS制作一个带有HTML表格的水平菜单栏来设计它。但是填充并不像我认为的那样工作：当我试图在用户用鼠标“悬停它”时改变整个li的背景颜色。但填充似乎出错了。

这是我在CSS中的代码（使用Sassy CSS）：

/* just to be sure the default of browser doesn't change look */
* {
    margin:0;
    padding:0;
}

/* some other design code ... */

#nav-menu {
    padding:5px;
    text-align:center;

    /* change background: browser specific gradient */
    background:$menu-bgcolor;

    li {
        list-style:none;
        display:inline;
        padding:2px 10px 2px 10px;

        :hover {
            background-color:$deco-dark;
            color:$deco-verylight;
        }
    }           
}

但结果如下所示：

正如您所见，更改的背景颜色（在这种情况下为$deco-dark）不会影响整个li区域（具有渐变的区域），正如我所料。我该怎么做才能改变这种行为？

Answer 1

使用SASS，以下内容：

li {
  :hover { } }

会将样式应用于:hover内的任何li元素 。你需要的是

li {
  &:hover {} }

它会将样式应用于li元素本身悬停时。目前，该样式可能仅适用于a内的li。

Answer 2

请尝试将您的li更改为display: inline-block;。

Answer 3

您也可以在li中放置锚点，然后相应地设置锚点的样式。这就是我通常做的事情。另外，像布兰特说的那样，你使用的是清单还是表格？列表可能更好，是您实现的，所以只需使用它。