CSS горизонтальная при наведении навигация исчезла в IE 7

Question

По сути, я следовал коду Ника из A List Apart:

http://www.alistapart.com/articles/horizdropdowns/

Я сделал несколько изменений, в основном - вместо этого я использую фоновые изображенияфонового цвета.Все работает, как и ожидалось, за исключением того, что в IE7 список при наведении (справа) исчезает при попытке навести курсор на один из дочерних элементов.

Изменения заключаются в следующем:

#sidebar ul.subnav {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 276px;
}

#sidebar ul.subnav li {
    position: relative;
}

#sidebar ul.subnav li ul {
    position: absolute;
    left: 275px;
    top: 0;
    display: none;
    width: 276px;
    height: 58px;
    z-index: 300;
}

#sidebar ul.subnav li a {
    display: block;
    text-decoration: none;
    color: #444444;
    height: 58px;
    line-height: 58px;
    text-indent: 35px;
    font-size: 14px;
    z-index: 300;
}

#sidebar ul.subnav li:hover ul { display: block; }
#sidebar ul.subnav li.over ul { display: block; }
#sidebar li.sub-item-1 { background: url('images/subnav-1.jpg') 0 no-repeat; }
#sidebar li.sub-item-2 { background: url('images/subnav-2.jpg') 0 no-repeat; }
#sidebar li.sub-item-3 { background: url('images/subnav-3.jpg') 0 no-repeat; }
#sidebar li.sub-item-4 { background: url('images/subnav-4.jpg') 0 no-repeat; }

#sidebar ul.subnav li.sub-item-1 ul li { background: url('images/rev-subnav-1.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-2 ul li { background: url('images/rev-subnav-2.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-3 ul li { background: url('images/rev-subnav-3.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-4 ul li { background: url('images/rev-subnav-4.jpg') 0 no-repeat; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Вот HTML, он не сильно изменился:

         <ul class="subnav"> 
            <li class="sub-item-1"><a href="#">Nav Item 1</a>
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-2"><a href="#">Nav Item 2</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-3"><a href="#">Nav Item 3</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li>
            <li class="sub-item-4"><a href="#">Nav Item 4</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
        </ul>

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

Редактировать: Область содержимого, которую покрывала наведенная навигация, вызывает проблему.

CSS выглядит следующим образом:

#content {
    width: 641px;
    min-height: 300px;
    position: absolute;
    top: 0;
    left: 278px;
}

Если я удаляюэто навигация работает отлично.В противном случае мне придется найти способ стилизовать эту область содержимого.

Edit # 2:

Добавление цвета фона к этому элементу содержимого (который находится за раскрывающимся списком) устраняет проблему вIE7.

Answer 1

Простое добавление цвета фона заставляет его работать в IE7:

#sidebar ul.subnav li a {
    background: #fff
}

Live Demo ( edit )

Если это не сработает на вашей реальной странице, у меня к вам один вопрос.

Какой тип документа вы используете на своей странице?(показать первые строки вашего файла)

Answer 2

У меня работает следующее.

background: url("http://www.kvammetravel.com/images/menu_background.gif") repeat-x scroll left top transparent;

Проверьте скриншот ниже

Работает в IE7.Если это все еще не работает для вас, вам нужно опубликовать свой рабочий код в jsfiddle.net, чтобы я мог посмотреть.