Горизонтальное подменю CSS - IE 6,7 оба не работают, пробовали с любым зависанием - PullRequest
Новая
       26

Горизонтальное подменю CSS - IE 6,7 оба не работают, пробовали с любым зависанием

0 голосов
/ 24 января 2010

Я не эксперт по меню CSS. Но я знаю основную систему, чтобы сделать меню CSS. Я использовал эту систему раньше и работает, но на этот раз она не работает.

Сайт http://www.uniethos.com. Пожалуйста, проверьте этот сайт

Это меню работает со всеми другими последними браузерами. Но не с IE 6 и 7. Я знаю, что IE6 не поддерживает hover, кроме якоря. Так что до того, как я использовал Whever 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;
}

Ответы [ 2 ]

0 голосов
/ 13 мая 2010

Конечно, что угодно: лучше всего парить. Но я не знаю, почему это не сработало. Если вы столкнулись с той же проблемой, вы можете использовать этот 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);

В моем случае у меня есть идентификатор div с именем "glossymenu". Вы должны изменить это со своим идентификатором. А также нужно объявить еще один класс CSS с именем «over». В моем случае - 

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

Этого достаточно для выпадающего меню одного уровня. Вам ничего не нужно: парите, если с вами все в порядке.

0 голосов
/ 12 апреля 2010

Ну, я не нашел проблему. Но я исправил меню с пользовательским кодом 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);

Люди, которые сталкиваются с такой же проблемой, могут найти это полезным. Спасибо.

...