CSS 水平子菜单 - IE 6,7 都不起作用，尝试任何悬停答案

【问题标题】：CSS Horizontal sub menu - IE 6,7 both dont working, tried with whatever hoverCSS 水平子菜单 - IE 6,7 都不起作用，尝试任何悬停
【发布时间】：2010-05-13 18:30:43
【问题描述】：

我不是 CSS 菜单方面的专家。但我知道制作 CSS 菜单的基本系统。我以前使用过这个系统并且可以工作，但这次它无法正常工作。

该网站是http://www.uniethos.com。请查看本站

此菜单适用于所有其他最新的浏览器。但不适用于 IE 6 和 7。我知道 IE6 除了锚点外不支持悬停。所以在我使用任何悬停之前。但这一次它不起作用，即使是 IE7。我不知道为什么会这样。可能我的css可能有问题。请检查css。

如果您没有安装 IE 6 或 7，您可以从 http://spoon.net/browsers/ 运行一个。需要安装一个插件。

我用于菜单的 CSS 是

.glossymenu{
    background: #B4B3B3;
    height: 30px;
    width: 100%;
    padding: 0;
    margin: 0;
    display:inline-block;
    position:relative;

}

.glossymenu ul
{
   list-style: none;
   padding: 0px;
   margin: 0; 
   padding-left: 0px;
}

.glossymenu li ul
{
    display:none;
    position:absolute;
    width: 80%;
    top:30px;
    left:0px;
    background-color:#5B0C10;
    border:0px;
    z-index: 99;
}

.glossymenu li li a
{
    padding: 0px 10px 0px 10px; 
}    

.glossymenu li li a:hover
{
    background : #871016; 

}

.glossymenu li{
    float:left;
    padding: 0;
}

.glossymenu li a{
    float: left;
    display:block;
    position:relative;
    color:#FFF;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #FFF;
    background: #5B0C10;
    background-position: left;
    text-decoration: none;
}

.glossymenu li a:visited{
    text-decoration: none;
}

.glossymenu ul li:hover ul 
{
    display: block;
}

【问题讨论】：

标签： css menu hover submenu

【解决方案1】：

好吧，我没有发现问题。但我用自定义 Javascript 代码修复了菜单。

sfHover = function() {
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

同样面临同样问题的人可能会觉得这很有帮助。谢谢。

【讨论】：

【解决方案2】：

当然无论如何：悬停是最好的。但我不知道为什么那不起作用。如果你遇到同样的问题，你可以使用这个 javascript。但是你必须理解代码。

sfHover = function() { 
// You may have to change the "glossymenu" id with your one
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI"); 


    for (var i=0; i<sfEls.length; i++) { 
        sfEls[i].onmouseover=function() { 
            this.className+=" over"; 
        } 
        sfEls[i].onmouseout=function() { 
            this.className=this.className.replace(new RegExp(" over\\b"), ""); 
        } 
    }  }  if (window.attachEvent) window.attachEvent("onload", sfHover);

就我而言，我有一个名为“glossymenu”的 div id。你必须用你的 id 来改变它。并且还必须声明另一个名为“over”的 CSS 类。就我而言 -

.glossymenu li:hover ul, .glossymenu li.over ul
{
    display: block;
}

这对于一级下拉菜单已经足够了。您不需要任何东西：如果您觉得可以，请悬停。

【讨论】：