выпадающее меню css ведет себя странно

Question

Я пытаюсь реализовать раскрывающееся меню (доступно по адресу gosu.pl/menu, раскрывающееся меню 1, пример 1)

но, как ни странно, у меня разные эффекты в разных браузерах, а не в обычном IE, который все портит.

Я на своем локальном хосте и использую cakephp (хотя это не должно иметь никакого значения). Когда я смотрю через FF, меню выглядит нормально, и появляется выпадающий бит там, где он должен см.

но если я нажму Ctrl + F5, чтобы очистить кеш и обновить страницу, она превратится в this

Странно то, что если я нажму только f5, чтобы перезагрузить страницу, она вернется к нормальной жизни, а затем снова вызовет Ctrl + F5, чтобы снова получить Wonkey.

Я тестировал в IE, и все версии выглядят нормально, даже когда я перезагружаюсь. Safari и Chrome - все шутки, несмотря ни на что, но опера в порядке.

Я сравнил html и css, когда отображаются как wonkey, так и normal, и все абсолютно одинаково. Может кто-нибудь просветить меня в чем проблема? Я думаю, что-то связано с кешем, но почему в разных браузерах он будет другим?

Извините, я не могу опубликовать html или css, потому что я на своей локальной машине.

Помощь!

Answer 1

Я лично не большой поклонник использования таблиц в качестве пунктов меню. Лучшая практика - использовать списки с элементами списка.

div#mainmenu_bottom ul {    
    list-style:none;
    margin:0px;
    padding:0px;    
}

div#mainmenu_bottom ul li {
    padding:0px;
    margin:0px;
    display:inline;
    float:left;
    height:25px;
}

div#mainmenu_bottom ul li ul {
    display:none;
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    border-width:0px 1px 1px 1px;
}

div#mainmenu_bottom ul li:hover ul {
    position:absolute;
    top:236px;  
    padding:0px;
    margin:0px 0px 0px -5px;    
    width:150px;
    display:block;      
    border:1px solid #00451A;

}

div#mainmenu_bottom ul li li {
    width:140px;
    padding:5px;
    border:1px solid #00451A;
    border-width:0px 1px 1px 0px;
    background-color:#00451A;   
    margin:0px;
    height:15px;
    cursor:pointer;
}

div#mainmenu_bottom ul li li:hover {
    background-position:-50px -4px;
    background-image:url('../images/interface/bg_block_groot.jpg');
}

Структура будет такой

<div id="mainmenu_bottom">
    <ul>
        <li><a href="" class="mainmenu">Test 1</a></li>
        <li><a href="" class="mainmenu">Test 2</a></li>
        <li>
            <ul>
                <li>link 1</li>     
                <li>link 2</li> 
                <li>link 3</li> 
            </ul>
            <a href="" class="mainmenu">Test 3</a>
        </li>            
    </ul>
</div>