Html 使用兼容所有浏览器的css和li元素创建菜单

我试图用li元素创建一个简单的菜单，但它只在IE7上工作，在FF和Chrome中，对齐变得很奇怪。 另外：hover和：Active仅适用于IE7

有人能帮我查一下吗

我会非常感激的

CSS:

HTML:

特别是小吃、葡萄酒和菜单
传统创意餐厅。葡萄酒和塔帕斯

教授如何到达那里。（）

编辑：现在，您发布了

：active

和

：hover

CSS，我可以看出您在规则中缺少了一个#。因此，它被应用于“导航”标记，而不是带有“导航”id的标记。更改CSS以在“导航”之前添加#：

---

你能偶然链接一个工作示例吗？我可以，但我要到明天早上才能链接。你到底想做什么？左边是徽标，右边是说明，下面是导航？还是全部在一行？左边是另一个很好的链接徽标，右边是描述，下面是导航。看，你在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;


}

<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>

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