css - 菜单显示问题

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

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

为您的菜单定义 a:link、a:visited、a:hover 和 a:active，并严格按照该顺序。