gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:31:34 24 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

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

编辑:现在您发布了 :active:hover CSS,我可以看到您在开头缺少 #的规则。因此,它被应用于“导航”标签,而不是带有“导航”id 的标签。更改您的 CSS 以在“导航”之前添加 #:

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

关于html - 使用兼容所有浏览器的 css 和 li 元素创建菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2883638/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com