Форумы портала PHP.SU :: Версия для печати

1. SergeantPEPPER - 30 Октября, 2008 - 11:32:36 - перейти к сообщению

Доброго времени суток.

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

и наконец, вышло...
Но как оказалось работает корректно во всех браузерах, кроме IE (как всегда Недовольство, огорчение

) По непонятной причине пункты выпадающего меню (элементы LI) становятся неактивными (т.е. отображаются, но своих функций не выполняют)... ВСЕ КРОМЕ ПЕРВОГО! Как объяснить это я действительно не знаю...

Посмотреть на это можно здесь http://vmk4[dot]kzn[dot]ru/account_sys

Меню в HTML выглядит так:

CODE (text):
скопировать код в буфер обмена

<div class="menu">
                <ul style="padding-left: 0.1em;" onmouseover="showItem('item1');highlightItem('hItem1');" onmouseout="hideItem('item1');lowlightItem('hItem1');">
                        <li>
                                <a href="#" id="hItem1">File</a>
                                <ul id="item1" onmouseout="hideItem('item1');lowlightItem('hItem1');">
                                        <li><a href="#">Option1</a></li>
                                        <li><a href="#">Option2s</a></li>
                                        <li><a href="#">Option3</a></li>
                                        <li><a href="#">Option4</a></li>
                                </ul>
                        </li>
                </ul>
                <ul onmouseover="showItem('item2');highlightItem('hItem2');" onmouseout="hideItem('item2');lowlightItem('hItem2');">
                        <li>
                                <a href="#" id="hItem2">Fonts2</a>
                                <ul id="item2" onmouseout="hideItem('item2');lowlightItem('hItem2');">
                                        <li><a href="#">Option1</a></li>
                                        <li><a href="#">Option2</a></li>
                                        <li><a href="#">Option3</a></li>
                                        <li><a href="#">Option4</a></li>
                                </ul>
                        </li>
                </ul>
                <ul onmouseover="showItem('item3');highlightItem('hItem3');" onmouseout="hideItem('item3');lowlightItem('hItem3');">
                        <li>
                                <a href="#" id="hItem3">Fonts3</a>
                                <ul id="item3" onmouseout="hideItem('item3');lowlightItem('hItem3');">
                                        <li><a href="#">Option1</a></li>
                                        <li><a href="#">Option2</a></li>
                                        <li><a href="#">Option3</a></li>
                                        <li><a href="#">Option4</a></li>
                                </ul>
                        </li>
                </ul>
        </div>

JS функции так:

CODE (text):
скопировать код в буфер обмена

function showItem(id)
{document.getElementById(id).style.display='block';}
function hideItem(id)
{document.getElementById(id).style.display='none';}
function highlightItem(id)
{
        document.getElementById(id).style.backgroundColor='#669933';
        document.getElementById(id).style.color='#FFF';
        document.getElementById(id).style.borderColor='#558822';
}
function lowlightItem(id)
{
        document.getElementById(id).style.backgroundColor='#EEE';
        document.getElementById(id).style.color='#444';
        document.getElementById(id).style.borderColor='#DDD';
}

А стили CSS так:
/* Class selectors */

CODE (text):
скопировать код в буфер обмена

.menu{
        width: 63.8em;
        height:  2.1em;
        margin: 0 0.5em 0.3em 0.5em;
        background-color: #336699;
        border: 0.1em solid <?php echo $Config['header_bord_color']; ?>;
        line-height: 1.4em;
        white-space: nowrap;
}
.menu ul {
        display: block;
        list-style-type: none;
        z-index: 90;
        text-align: center;
}
.menu ul li{
        width: 13em;
        white-space: nowrap;
        float: left;
        position: relative;
}
.menu ul li a{
        font-size: 0.95em;
        font-weight: normal;
        text-decoration: none;
        text-transform: uppercase;      
        background-color: <?php echo $Config['menu_bg_color']; ?>;
        color: <?php echo $Config['menu_font_color']; ?>;
        border: 0.1em solid <?php echo $Config['menu_bord_color']; ?>;
        padding: 0.3em 1.6em;
        display: block;
        
}
.menu ul li a:hover{
        text-decoration: none;
        background-color: <?php echo $Config['smenu_bg_color']; ?>;
        color: <?php echo $Config['smenu_font_color']; ?>;
        border: 0.1em solid <?php echo $Config['smenu_bord_color']; ?>;
}
.menu ul li ul{
        position: absolute;
        left: 0;
        top: auto;
        display: none;
        z-index: 200;
        width: 13em;
}
.menu ul li ul li{
        position: relative;
}
.menu ul li ul li a{
        padding: 0.3em 1.6em;
        font-size: 0.8em;
}