Question

我使用CSS创建了一个菜单，并在其下面使用了一个HTML链接。但是，链接不是蓝色或下划线，而是看起来和徘徊，就像我使用CSS为菜单制作的链接一样。此外，无论我在我希望它出现的文本后面输入标签，此链接都会向左移动。

这是代码的样子：

<!DOCTYPE html>
<html>
<head>

<style>
ul
{
float:left;position:relative;width:40%;padding:0;margin:0;list-style-type:none;
}
a
{
float:left;width:5em;text-align:center;text-decoration:none;color:black;background-color:#c0c0c0;padding:0.2em 0.5em;
}
a:hover {background-color:#d0d0d0;}
li {display:inline}
</style>

</head>

<div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

<br>
<br>

To see a picture of Curious George, click <a href="http://cdn.mhpbooks.com/uploads/2012/05/Curious_Georg.jpg">this link</a>

</html>

以下是它显示的内容：

http://img96.imageshack.us/img96/3938/vi22.jpg

任何帮助都会非常感激。我本周刚开始学习HTML / CSS。

Answer 1

更改样式以利用特异性：

<style>
ul {
    float:left;position:relative;width:40%;padding:0;margin:0;list-style-type:none;
}
ul li a {
    float:left;width:5em;text-align:center;text-decoration:none;color:black;background-color:#c0c0c0;padding:0.2em 0.5em;
}
ul li a:hover { background-color:#d0d0d0; }
li { display:inline }
</style>

以下是有关此内容的更多信息的链接：CSS Specificity

Answer 2

您需要更具体地了解css规则。因为它现在适用于您的菜单的所有添加和ID或类似

#menu a {
  some css here
}

如何禁止CSS菜单覆盖标准HTML链接？

2 个答案: