代码之家  ›  专栏  ›  技术社区  ›  Amra

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

  •  0
  • Amra  · 技术社区  · 16 年前

    我试图用li元素创建一个简单的菜单,但是它只在ie7上工作,在ff和chrome中,对齐方式变得很奇怪。 另外:hover和:active仅在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>
    
    1 回复  |  直到 13 年前
        1
  •  2
  •   ANeves    16 年前

    Suns of Suckerfish 教你如何到达那里。( Example )

    编辑 :现在您发布了 :active 和 :hover CSS,我可以看到你在乞讨规则中缺少了一个。所以它被应用于“导航” 标签 而不是带有“导航”的标签 身份证件 . 更改您的CSS以在“导航”前添加:

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