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

我不是专家有关CSS菜单。但我知道制作css菜单的基本系统。我之前使用过这个系统并且工作，但是这次它不起作用。CSS水平子菜单 - IE 6,7都不工作，尝试任何悬停

该网站为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; 
}

来源

2010-01-24 Aajahid

嗯，我没有发现问题。但我用自定义的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);

那些也面临同样问题的人可能会发现这种帮助。谢谢。

来源

2010-04-12 15:52:56 Aajahid

Ofcourse whatever：hover is best。但我不知道为什么这不起作用。如果你面对同样的问题，你可以使用这个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; 
}

这足以让一个水平下拉菜单。你不需要做任何事情：如果它与你合适的话可以悬停。

来源

2010-05-13 10:30:43 Aajahid

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

回答

相关问题