css - 菜单显示问题

所以我有一个来自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>

请帮忙。谢谢

最佳答案

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

为菜单定义a：link，a：visited，a：hover和a：active，顺序正确。