Проблемы с отображением меню

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: visit, a: hover и a: active для вашего меню, именно в этом порядке.