CSS悬停问题（填充）

Question

尝试在菜单项周围填充鼠标，并将其悬停在菜单项上时会更改背景颜色。 但是，目前，填充仅影响元素的侧面，而不影响顶部或底部。

HTML：

<html>
<head>
    <link rel="stylesheet" href="style.css" type"text/css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
                <li><a href="index.html">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS：

#container {
    margin:auto;
    border:1px solid black;
    width:960px;
    height:700px;
}

#header {
    width:960px;
    height:150px;
    border: 1px solid blue;
}

#menu {
    width:800px;
    list-style:none;
}

#menu li {
    float:left;
    margin-left:20px;
    border:1px solid black;
}

#menu a:hover {
    background:blue;
    padding:20px;
}

#menu a {
    padding:20px;
    height:20px;
    text-decoration:none;
}

Answer 1

只需更换height:20px与display:block用于#menu a作为height似乎从我所看到的冗余。

#menu a {
  padding:20px;
  display:block;
  text-decoration:none;
}

CSS悬停问题（填充）

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-02-16 12:32:49

CSS悬停问题（填充）

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-02-16 12:32:49

解决方案1
4 已采纳 2012-02-16 12:32:49