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都不工作，嘗試任何懸停

回答

相關問題