CSS 가로 서브 메뉴 - IE 6,7 모두 작동하지 않습니다. 어떤 호버 든 사용해보십시오.

Question

CSS 메뉴에 대한 전문가는 아닙니다. 그러나 CSS 메뉴를 만드는 기본 시스템을 알고 있습니다. 이전에이 시스템을 사용했지만 작동하지만 이번에는 작동하지 않습니다.

사이트는 http://www.uniethos.com입니다. 이 사이트를 확인하십시오

이 메뉴는 다른 모든 최신 브라우저에서 작동합니다. 하지만 IE 6이 아닙니다. & 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

물론 : 호버가 가장 좋습니다. 그러나 왜 그것이 작동하지 않는지 나는 모른다. 동일한 문제가 발생하는 경우이 자바 스크립트를 사용할 수 있습니다. 그러나 코드를 이해해야합니다.

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; 
} 

이 한 단계 드롭 다운 메뉴에 충분하다. 당신은 무엇이든 필요하지 않습니다.