1

我使用 CSS 创建了一个菜单，并在其下方使用 a href 标记有一个 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。

4

2 回答 2

3

改变你的风格以利用特殊性：

<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

于 2013-07-02T16:52:57.740 回答
1

您需要更具体地使用您的 CSS 规则。就像现在一样，它适用于您的菜单的所有 add 和 id 或类似的东西

#menu a {
  some css here
}
于 2013-07-02T16:54:17.070 回答