На сайте, над которым я сейчас работаю, есть вложенный неупорядоченный список в боковой панели, когда <li> из этого списка наведен, он показывает (ранее скрытый) дочерний элемент <ul>. Это работает нормально во всех браузерах, кроме IE 7 + 6. В этих браузерах всплывающее окно <ul> отображается под <li> в списке выше. Любая идея, почему это будет делать это?
Мой CSS выглядит следующим образом:
div#sidebar-products {
border-bottom: 3px solid #D31245;
height: 297px;
}
div#sidebar-products h2 {
font-size: 1.5em;
border-bottom: 0;
padding: 5px 0 12px 0;
color: #D31245;
}
div#sidebar-products ul{
z-index: 0;
}
div#sidebar-products li{
position: relative;
}
div#sidebar-products ul li a,
div#sidebar-products ul li a:visited
{
display: block;
border-bottom: 1px solid #eeeeee;
text-decoration: none;
padding: 7px 10px 7px 20px;
color: #6b6869;
background: #fff url(/img/raquo-red.png) 7px center no-repeat;
}
div#sidebar-products li a:hover,
div#sidebar-products li a:focus,
div#content-holder div#sidebar-products li.active a
{
background-image: url(/img/raquo-white-red.png);
background-color: #D31245;
color: #fff;
}
div#sidebar-products ul ul{
display: none;
padding-left: 10px;
position: absolute;
margin-top: -1px;
z-index: 9999 !important;
border: 1px solid #D31245;
background: #f3f3f3;
width: 247px;
}
div#sidebar-products ul li ul li {
margin-bottom: 0;
position: static !important;
z-index: 500;
}
div#site-holder div#content-holder div#sidebar-products ul ul li a {
background: #fff url(/img/raquo-red.png) 10px center no-repeat;
padding-left: 24px;
color: #949494;
}
div#site-holder div#content-holder div#sidebar-products ul li ul li a:hover,
div#site-holder div#content-holder div#sidebar-products ul li ul li a:focus
{
color: #D31245;
background-color: #fff;
}