菜单显示问题

Question

所以我有一个来自ul和li的菜单，它在页面加载时看起来像这样：

但是当我点击每个菜单并执行代码时会发生这种情况：

我该怎么办？这是我的CSS：

#menu-centered {
    padding: 0px;
    margin-bottom: 0px;
}
#menu-centered ul {
    margin: 0;
    padding: 0;
    height: 99px;
    width: 603px;
}
#menu-centered li {
    display: inline;
    list-style: none;
    padding: 0px;
    background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    display: block;
    margin-right: 0;
    padding: 20px 30px 0px 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    height: 68px;
    width: 130px;
    text-align: center;
}
#menu-centered a:hover {
    background: url(images/menu2.png) no-repeat right top;
}

这是菜单的html代码：

<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li><a href="javascript:Clikbtn2()">MENU2</a></li>
<li><a href="javascript:Clikbtn3()">MENU3</a></li>
</ul>
</div>

请帮忙。感谢

Answer 1

您的菜单需要一些LoVe和HAte。换句话说，您需要创建所有四个重要的链接伪选择器，以避免让浏览器通过应用默认的有效伪选择器来破坏您的布局。

为您的菜单定义一个：链接，一个：已访问，一个：悬停和一个：主动完全按照该顺序。