html - 下拉导航菜单栏在IE7中有效，但在FireFox中不起作用

我有一个下拉栏-

    <div class="buttonContainer">
        <ul>
            <li>
                <a class="menu1one" href="">Dashboard</a>
            </li>
        </ul>
        <ul>
            <li>
                <div class="noLink">Tasks</div>
                <ul>
                    <li><a href="">View</a></li>
                    <li><a href="">Edit</a></li>
                    <!--[if lte IE 6]></a><![endif]-->
                </ul>
                <!--[if lte IE 6]></a><![endif]-->
            </li>
            <li>
                <div class="noLink">Dictionaries</div>
                <ul>
                    <li><a href="">Needs</a></li>
                    <li><a href="">Activities</a></li>
                </ul>
                <!--[if lte IE 6]></a><![endif]-->
            </li>
            <li>
                <div class="noLink">Admin</div>
                <ul>
                    <li><a href="">User Accounts</a></li>
                </ul>
                <!--[if lte IE 6]></a><![endif]-->
            </li>
        </ul>
    </div>

CSS-

/*dropdown menu*/
.menu { float:left; width:100%; font-family: arial; border-top:1px solid #4c597f; background-color: #1079b5; min-width:950px; }
.menu .buttonContainer { padding:0 0 0 200px; }
.menu ul { padding:0; margin:0; list-style-type:none; }
.menu ul li { margin:0; float:left; position:relative; background-color:#153d71; }
.menu ul li a, .menu ul li a:visited { float:left; display:block; text-decoration:none; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li a:hover { background-color:#9fc1ed; color: #153d71;}
.noLink { display:block; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li:hover { width:auto; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:154px; border-bottom:1px solid #000; }
.menu ul li:hover ul.endstop { left:-92px; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display:block; background:#1079b5; color:#000; height:auto; line-height:15px; padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0; }
.menu ul li:hover ul li a.drop { background:#ccd no-repeat 3px 8px; }
.menu ul li:hover ul li a:hover { background-color: #153d71; color: #FFFFFF; }
.menu ul li:hover ul li a:hover.drop { background: #ccd no-repeat 3px 8px; }
.menu ul li:hover ul li:hover ul { display:block; position:absolute; left:153px; top:-1px; }
.menu ul li:hover ul li:hover ul.left { left:-153px; }
/* IE6 */
.menu ul li a:hover ul { display:block; position:absolute; top:30px; t\op:33px; background:#153d71; left:0; border-bottom:1px solid #000; }
.menu ul li a:hover ul.endstop { left: -92px; }
.menu ul li a:hover ul li a { display:block; background:#153d71; color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0; }
.menu ul li a:hover ul li a.drop { background:#ccd url('') no-repeat 3px 8px; padding-bottom:4px; }
.menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height:0; width:0; }
.menu ul li a:hover ul li a:hover { color:#000; background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover.drop { background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover ul { visibility:visible; position:absolute; top:0; color:#000; left:153px; }
.menu ul li a:hover ul li a:hover ul.left { left:-153px; }

下拉菜单运行良好，或在IE7中悬停显示，但在Firefox中未响应。

有人可以帮我吗？我尝试为内部li a：hover设置position：relative，它显示菜单，但将整个div扩展到其结尾。这里要更改什么？

另外，我不想为此使用javascript / jquery。

-谢谢

编辑-我已经找到解决方案以使其正常工作。我添加了“ position：absolute;” css中的.menu {}属性。这样就可以了...谢谢。

最佳答案

我刚刚在IE7上测试了它的工作效果
http://jsfiddle.net/vcN5g/