简单的CSS下拉列表在浏览器中显示不同

时间:2013-01-10 16:44:33

标签: css cross-browser submenu

非常感谢您在此处阅读我的第一个问题。

我是http://www.theacoutlet.com的管理员,我正在添加一些内容页面。我从中间导航中取出了一个元素。栏(“查找产品”)并在悬停时通过CSS下拉。

CSS(下方)已经过验证。

问题是这个子菜单现在在Firefox,IE和Chrome 中显示三种不同的方式。在我看来,它并不复杂,我很难过。它不会在IE中显示 ,当然我们的大多数客户都使用IE。

IE:悬停时子菜单根本不显示。

Firefox:子菜单显示,顶部有一个奇怪的列表项目项目符号(不在HTML!中),菜单显示在原始“查找产品”文本上。

Chrome:子菜单显示效果很好,唯一的问题是,当您尝试将鼠标悬停在新项目上时,它很容易消失...需要极快/精确的鼠标移动以防止菜单消失。

代码如下。感谢您阅读并感谢您的帮助!

HTML:

<div class="menisell2">


<a href="search.php" class="menisell2">FIND PRODUCTS</a> <img src="images/de_26.jpg" width="1" height="22" border="0" align="middle"> 

<span class="menisell2content">

<a href="search.php"><br>SEARCH</a><br><br>

<a href="products1.php">COOLING</a><br><br>

<a href="products2.php">HEAT PUMP</a><br><br>

<a href="products3.php">DUAL FUEL</a><br><br>

<a href="products4.php">GAS HEAT</a><br><br>

<a href="products5.php">MINI SPLITS</a><br><br>

<a href="products6.php">PACKAGE UNITS</a><br><br>
</span>

</div>

CSS:

.menisell2, .menisell2 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    display: inline;
    position:relative;
}

.menisell2 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.menisell2content a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.menisell2:hover  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #CE252C;
    text-decoration: none;
} 

.menisell2 a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}


.menisell2content a  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #4682B4;
}

.menisell2content a:hover  {

color: #CE252C;

}

.menisell2:hover .menisell2content{

visibility:visible;


}

.menisell2content{
visibility:hidden;
position:absolute;
width:100%;
display:list-item;
font-size: 12px;
color: #FFFFFF;
background-color: #4682B4;
}

0 个答案:

没有答案