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