用css和li元素創建菜單兼容所有瀏覽器

Question

我想用li元素創建一個簡單的菜單，但它只能在IE7上工作，在FF和Chrome中，對齊會變得很奇怪。 此外：懸停和：活動只適用於IE7。

有人能給我一個這樣的打擊嗎？

我真的很感激它。

CSS：

#heading{ 
    width: 700px; 
    height:auto; 
    margin: 0 auto; 
    background-color:#FFFFFF; 
    margin-top:5px; 
    margin-bottom:5px; 
    display:block; 
} 
#imglogo{ 
float:left; 

} 

#barDescription{ 
    float:right; 

} 



#navigation{ 
    text-align: right; 
    margin-top: 70px; 
} 

#navigation li{ 
    float: right; 
    display: block; 
    text-align: center; 
    list-style-type: none; 
} 
#navigation li a{ 

    color:#A08019; 
    background-image: url('Images/Menu1.png'); 
    background-repeat:repeat-x; 
    background-position: center center; 
     text-decoration:none; 
     font-weight:bold; 
    display: block; 
    height:25px; 
    vertical-align:middle; 
     padding-right:10px; 
     padding-left:10px; 
} 

navigation li a:hover{ 
    color:white; 
    background-image: url('Images/Menu2.png'); 
    background-repeat:repeat-x; 
    background-position: center center; 
    text-decoration:none; 
    font-weight:bolder; 
    display: block; 
    height:25px; 
    vertical-align:middle; 
    padding-right:10px; 
    padding-left:10px; 


} 
navigation li a:active{ 
    color:#B39A48; 
    background-image: url('Images/Menu2.png'); 
    background-repeat:repeat-x; 
    background-position: center center; 
    text-decoration:none; 
    font-weight:bolder; 
    display: block; 
    height:25px; 
    vertical-align:middle; 
    padding-right:10px; 
    padding-left:10px; 


} 

HTML：

<div id="heading" > 
    <div id="imglogo"> 
     <img id="logo" src="Images/logo.png" alt="logo" /> 
    </div> 
    <div id="barDescription"> 
     <h4>Especialidad en tapas,vinos y menus</h4> 
     <h5>Restaurante de cocina creativa tradicional. Vinos y tapas</h5> 
    </div> 

    <ul id="navigation"> 
     <li><a href="#">Contacto</a></li> 
     <li><a href="#">Ubicacion</a></li> 
     <li><a href="#">Reservas</a></li> 
     <li><a href="#">Menus</a></li> 
     <li><a href="#">Local</a></li> 
    </ul> 

    </div> 

Answer 1

Suns of Suckerfish教你如何到達那裏。 （Example）

編輯：現在你張貼的:active和:hover CSS，我可以看到你錯過了＃在規則的beggining。所以它被應用於「導航」標籤而不是具有「導航」標籤ID。更改你的CSS以在「導航」之前添加＃號：

#navigation li a:hover{ 
    /* ... */ 
} 
#navigation li a:active{ 
    /* ... */ 
}