CSS с выпуском IE6 выпадающего - PullRequest
Новая
       24

CSS с выпуском IE6 выпадающего

0 голосов
/ 09 октября 2009

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

/**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**
NAVIGATION MENUS
~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**/

#topNavigation
{
    width: 750px;
    background-color: #EC2327;
    float: left;
    position: absolute;
    z-index: 10;
}

#footerBar
{
    float: left;
    width: 750px;
    background-color: #EC2327;
}   

#topNavigation ul, #footerBar ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 6em;
    float: left;
}

#topNavigation a, #topNavigation h2, #footerBar a
{
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: White;
    text-align: center;
    display: block;
    margin: 0;
    padding: 2px 3px;
    text-decoration: none;
}

#topNavigation h2
{

}

#topNavigation a
{
    color: White;
    background-color: #EC2327;
}

#topNavigation a:hover
{
    color: #EC2327;
    background-color: White;
}

#topNavigation ul ul 
{
    display: none;
    position: absolute;
    width: auto;
    z-index: 500;
}

#topNavigation ul li:hover ul
{
    display: block;
}

А вот HTML, который использует этот CSS. 

<div id="topNavigation">
        <ul>
            <li><h2><a href="#">About Us</a></h2>
                <ul>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="partners.aspx">Partner's Page</a></li>
                    <li><a href="testimonials.aspx">Testimonials</a></li>
                    <li><a href="#">Environmental</a></li>
                </ul>  
            </li>
        </ul>
</div>

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

для принятия команды a: hover, он только меняет цвет. Что мне нужно сделать для того, чтобы перейти на следующий уровень, чтобы открыть этот курсор? Я бы предпочел сохранить этот чистый CSS, если это возможно.

Спасибо, Mike

Ответы [ 2 ]

1 голос
/ 09 октября 2009

К сожалению, псевдокласс :hover поддерживается только в a элементах IE6.

Проверьте в этой статье , чтобы получить советы о том, как решить проблему.

1 голос
/ 09 октября 2009

Кажется, что следующее не выполняется в IE6 

#topNavigation ul li:hover ul
{
    display: block;
}

Можете ли вы дать уровню 2 UL / LI назначение класса css, а затем создать для него селектор?

...