Question

我不是css菜单的专家。但我知道制作css菜单的基本系统。我以前使用过这个系统并且有效，但这次它不起作用。

该网站为http://www.uniethos.com。请查看此网站

此菜单适用于所有其他最新浏览器。但不适用于IE 6＆amp; 7.我知道除了锚之外，IE6不支持悬停。所以在我使用Whatever Hover之前。但这次它不起作用，甚至与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;
}

Answer 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);

那些也面临同样问题的人可能会发现这有用。感谢。

Answer 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。你必须用你的身份改变这个。并且还必须声明另一个名为“over”的CSS类。就我而言 -

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

这对于一个级别的下拉菜单就足够了。你不需要任何东西：如果它可以和你一起悬停。

CSS水平子菜单 - IE 6,7都无法正常工作，无论何种悬停都尝试过

2 个答案: