1

我尝试使用 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;
        }
    }           
}

但结果如下所示：

悬停状态的菜单项——您可以看到填充并未覆盖所有 li 区域。

正如您所看到的，$deco-dark在这种情况下，更改的背景颜色不会影响整个li区域（具有渐变的区域），正如我所期望的那样。我能做些什么来改变这种行为？

4

3 回答 3

3

使用 SASS，以下内容：

li {
  :hover { } }

将:hover样式应用于li. _ 你需要的是

li {
  &:hover {} }

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

于 2012-07-06T18:44:20.973 回答
0

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

于 2012-07-06T18:06:03.387 回答
0

您也可以在 li 中放置锚点，然后相应地设置锚点的样式。这是我通常做的。另外，就像 Brant 说的，您使用的是列表还是表格？列表可能更好，并且是您已实现的，因此只需使用它。

于 2012-07-06T18:40:34.853 回答