0

所以我有这个讨厌的问题，我无法摆脱。我通过 SSI 将我的菜单和标题信息插入到我的 html 中......以及 menu.html 页面（包含我的菜单）的行为正确，这意味着菜单项在 :hover 上加下划线，因为它们应该和图像（组织标志）不会因为一个

.imglink:hover{
background:none;
border-style:none;
}

我已经插入...但是当我转到通过 SSI 拉入 menu.html 页面的主页时，当调用 :hover 时徽标下面有一行，即使我在 css 中都有上述代码对于 menu.css 和 homepage.css

有任何想法吗？

这是 menu.html 页面的 CSS：

ul#menu{
position:relative;
top:0px;
left:0px;
list-style: none;
margin:2px 0px 0px 0px;
padding:0px;
display:block;
float:left;
width:100%;
clear:both
}

ul#menu li {
float:left;
margin:5px 0px 5px 5px;
}

ul#menu li a:link,a:visited {
display:block;
float:left;
margin:2px;
background-color: #ffffff;
color:#000000;
font-weight:bold;
text-decoration:none;
font-size:.9em;
display:block;
text-align:center;
width:160px;
margin-bottom:0px;
}

ul#menu li a:hover {
color:#000000;
border-bottom:1.5px solid black;
}

ul#menu li a.active {
color:#000000;
background-color:#dbdbdb;
border:1.5px solid #000000;
border-top:none;
border-left:none;
border-right:none;
}

.imglink:hover{
background:none;
border-style:none;
}

这是我的菜单 html：

<body>
<div id="wrapper">
<div class="header">
    <a href="/" class="imglink"><img class="logo" src="http://www.unifiedforuganda.com/resources/new%20u4u%20logo.jpg" alt="U4U Logo" /></a>
</div>
<div class="social">
    <a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" target="_blank"><span></span></a>
    <a href="https://www.facebook.com/UnifiedforUNIFAT" id="facebook" class="imglink" target="_blank"><span></span></a>
    <a href="http://unifiedforunifat.wordpress.com/" id="wordpress" class="imglink" target="_blank"><span></span></a>
</div>

<div>
    <ul id="menu">
        <li class="active"><a href="http://unifiedforunifat.com/redesign/menutestpage.html">UGANDAN PROGRAMS</a></li>
        <li class="active"><a href="#">US MOVEMENT</a></li>
        <li class="active"><a href="#">MEDIA</a></li>
        <li class="active"><a href="#">ABOUT US</a></li>
        <li class="active"><a href="#">DONATE</a></li>
    </ul>
</div>
</div>
</body>

那么这是我与链接相关的主页的css：

a{
text-decoration:none;
}

a:link,a:visited{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:160px;
color:#000000;
float:left;
font-size:.9em;
transition-property:all 2s 0;
}

a:hover{
background-color:#e6e6e6;
color:#000000;
border-bottom: 2px solid black;
}

a:active{
background-color:#000000;
color:#ffffff;
border:none;
}

.imglink:hover{
background:none;
border-style:none;

}

任何帮助表示赞赏！

4

2 回答 2

0

我采用了您提供的代码并尝试复制您的问题，但没有成功。我尝试了 Firefox、Chrome 和 IE（版本 7-10），但无法重现您所描述的问题。话虽如此，您可以尝试以下几件事：

  • 在你的 CSS 调用中更具体：#wrapper.header .imglink:hover {etc...}
  • 关闭图像的边框：.imglink img {border:0;}
  • 确保您的网站使用DOCTYPE
  • 尝试使用边框：0；关闭边框而不是边框​​样式：无；
  • 查看源代码或使用FireBugs（或其他一些工具）在网页上查看您的代码，以查看您的 CSS 或 HTML 是否被更改或覆盖。

如果这些选项都不起作用，那么如果可能的话，您可以共享公共网站地址将会很有帮助。它还有助于了解您使用的浏览器和版本。希望有帮助。

于 2013-08-15T00:11:08.100 回答
0

所以我终于找到了答案……这是我代码的这一部分：

a:hover{
background-color:#e6e6e6;
color:#000000;
border-bottom: 2px solid black;
}

我认为这是我以前做的事情留下的代码，所以它甚至没有必要......现在我想起来了，它是我最初将菜单包含在 html 文档本身而不是我拥有的方法时留下的不是通过 SSI 插入整个标题，这将允许我将 i 放在所有页面上......

希望这可以帮助将来的人！

于 2013-08-15T21:23:56.913 回答