Question

我正在尝试实现一个下拉菜单（可在gosu.pl/menu，下拉菜单1，示例1中找到）

但我很奇怪，我在不同的浏览器中有不同的效果，而不是在通常的IE浏览器中冒出一切的方式。

我在我的localhost并使用cakephp（虽然这不应该有所作为）。当我查看FF时，菜单看起来没问题，下拉位出现在应该see的位置

但如果我按ctrl + f5清空缓存并刷新页面，它会变成this

奇怪的是，如果我只按f5重新加载页面，它会恢复正常，然后ctrl + f5再次回到winkey。

我已经在IE中测试过，即使重新加载，所有版本也都可以。无论如何，Safari和Chrome都是胜利的，但歌剧很好。

当显示winkey和normal并且一切都完全相同时，我比较了html和css。任何人都可以告诉我这是什么问题？我想与缓存有关，但为什么在不同的浏览器中会有所不同？

对不起，我不能发布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>

css下拉菜单表现得很奇怪

1 个答案: