[英]CSS menu looks good in FF/Chrome/Safari but not IE
I am using a CMS to build a site and I have some troubles with the menu. 我正在使用CMS构建网站,但菜单出现了一些麻烦。 As topic says it's not perfect in IE. 正如主题所说,它在IE中并不完美。 In the other browsers I hover over a menu item and a sub menu to that item is shown, when I hover over an item in the sub menu the item gets highlighted with a blue background. 在其他浏览器中,我将鼠标悬停在菜单项上,并显示该项目的子菜单,当我将鼠标悬停在子菜单中的项上时,该项目将以蓝色背景突出显示。 In IE however, only the first sub menu item gets highlighted when I hover over it but not when I hover over the others. 但是,在IE中,当我将鼠标悬停在第一个子菜单项上时,它会高亮显示,而当我将鼠标悬停在其他子菜单项上时,则不会。 As shown in my HTML below, if I hover over products-> Applications the background remains gray but if I hover over the first item (Online Services) the background turns blue. 如下面的HTML所示,如果我将鼠标悬停在产品->应用程序上,则背景保持灰色,但是如果我将鼠标悬停在第一项(在线服务)上,则背景变为蓝色。
The main menu items has an image as background and another image when I hover over it or it is active, the sub menus has a gray background and a blue one when I hover over the items. 当我将鼠标悬停在主菜单项上时,如果将其悬停或处于活动状态,则将其作为背景图像;当我将其悬停在其上时,子菜单将具有灰色背景,将其变为蓝色。
HTML 的HTML
<div id="header">
<ul id="menuElem">
<li class="home2"><a href="Home.aspx" >Home</a></li>
<li class="products"><a href="Products.aspx" >Products</a>
<ul>
<li><a href="Products/Online-Services.aspx" >Online Services</a></li>
<li><a href="Products/Applications.aspx" >Applications</a></li>
</ul>
</li>
<li class="about"><a href="About.aspx" >About Us</a>
<ul>
<li><a href="Blog.aspx" >Blog</a></li>
<li><a href="About/News.aspx" >News</a></li>
<li><a href="About/Events.aspx" >Events</a></li>
</ul>
</li>
</ul>
</div>
CSS for the menu sub items 菜单子项的CSS
#header li ul{
background: rgb(211,211,211);
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:161px;
z-index:200;
margin-left: 9px;
}
#header li li {
display:block;
float:none;
padding: 0px;
width:161px;
margin-left: 0px;
border-bottom: 1px solid;
border-color: #fff;
}
#header li:hover ul{
display:block;
}
#header li ul li a {background-image: none;
color:#000;
text-indent: 0px;
width: 161px;
padding-left: 5px;
}
#header li ul li a:hover {background-image: none;
background: rgb(26,66,126);
color:#fff;
}
CSS for the main menu 主菜单的CSS
#header ul {
display:block;
overflow:hidden;
float:right;
width:625px;
height:38px;
margin-top: 0px;
}
#header ul li {
display:block;
overflow:hidden;
float:left;
margin-left:2px;
}
menuhome a {
display:block;
overflow:hidden;
background:url(images/nav_home.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}
.menuhome2 a {
display:block;
overflow:hidden;
background:url(images/nav_homeH.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}
.menuhome a:hover, .menuhome a:active {
background:url(images/nav_homeH.png) no-repeat;
}
.menuabout a {
display:block;
overflow:hidden;
background:url(images/nav_about.png) no-repeat;
width:88px;
height:38px;
text-indent:-900px;
}
.menuabout2 a {
display:block;
overflow:hidden;
background:url(images/nav_aboutH.png) no-repeat;
width:88px;
height:38px;
text-indent:-900px;
}
.menuabout a:hover, .menuabout a:active {
background:url(images/nav_aboutH.png) no-repeat;
}
.menuproducts a {
display:block;
overflow:hidden;
background:url(images/nav_products.png) no-repeat;
width:87px;
height:38px;
text-indent:-900px;
}
.menuproducts2 a {
display:block;
overflow:hidden;
background:url(images/nav_productsH.png) no-repeat;
width:87px;
height:38px;
text-indent:-900px;
}
.menuproducts a:hover, .menuproducts a:active {
background:url(images/nav_productsH.png) no-repeat;
}
Usually I just gooogle css horizontal menu and create one in the tools out there online and then copy and paste it but with this CMS (built on asp.net and uses a masterpage) I have to assign a class name in a menu for each menu item. 通常,我只是在css水平菜单上在线创建一个工具,然后在线复制并粘贴它,但是使用此CMS(在asp.net上构建并使用母版页),我必须在菜单中为每个菜单分配一个类名项目。
How do I fix this for IE? 如何为IE修复此问题?
Thanks in advance. 提前致谢。
For the NOT IE CSS, you can use conditional comments, check out this article: 对于NOT IE CSS,您可以使用条件注释,请查看本文:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.