MENUの表示の問題

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が必要です。言い換えれば、デフォルトのアクティブな疑似セレクタを適用してブラウザにレイアウトを破壊させないためには、4つの重要なリンク疑似セレクタをすべて作成する必要があります。

メニューのa：link、a：hover、a：activeをこの順番で正確に定義します。