CSS悬停问题（填充）

试图在菜单项周围填充内容并将鼠标悬停在其上时会更改背景颜色。然而，目前填充仅影响元素的一侧而不是顶部或底部。CSS悬停问题（填充）

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; 
}

来源

2012-02-16 ritch

只需使用display:block取代height:20px为#menu a为height似乎从我所看到的冗余。

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

来源

2012-02-16 12:32:49 Marcel

这工作。谢谢。 – ritch 2012-02-16 12:40:40

CSS悬停问题（填充）

回答

相关问题