Выпадающее меню CSS просто не работает в IE 6 7 или 8

Question

Я ломал голову над этим весь день, и был на каждом форуме, где я мог найти решение ... безрезультатно ... пожалуйста, помогите.

У меня естьдовольно простой веб-сайт, над которым я работаю, с очень простым выпадающим меню.

Он работает и отлично выглядит в Firefox и в Safari ... но выпадающий список просто не отображается в Internet Explorer ..не в любой версии, которую я могу найти.

Вот временная ссылка: веб-сайт

кажется, что hover работает, потому что ссылка меняет цвет, но раскрывающийся список не удается

По сути, это шаблон, который будет использоваться для создания всего сайта позже ... сейчас я просто хочу, чтобы это меню работало.

Также: то есть, кажется, ставит странную границувокруг логотипа ... кто-нибудь знает, что с этим?

Answer 1

Чтобы избавиться от границы на логотипе, используйте это в таблице стилей:

a img {
border-style: none;
}

Я попробовал несколько вещей, и событие hover не работает с выбранными вами селекторами:

#menu ul li:hover ul

Я получил его в файл с этим:

#menu ul a:hover

Но тогда вы не можете получить доступ к элементу UL, чтобы показать его ... Я думаю, вам понадобится Javascript, чтобы исправить это в IE (по крайней мере, IE6).

Answer 2

IE6 просто не поддерживает :hover для других элементов, кроме ссылок.Взгляните на функцию sfHover из статьи Сын Suckerfish статьи HTML Dog .Функция является альтернативой JavaScript для IE6.Я предлагаю вам прочитать статью полностью.

sfHover = function() {
    var sfEls = document.getElementById('nav').getElementsByTagName('li');
    for (var i = 0; i < sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.className += ' sfhover';
        }
        sfEls[i].onmouseout = function() {
            this.className = this.className.replace(new RegExp(' sfhover\\b'), '');
        }
    }
}
if (window.attachEvent) window.attachEvent('onload', sfHover);

А для границы вокруг изображения просто добавьте:

img { border:0 }