Question

我有一个下拉栏 -

    <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：悬停并显示菜单，但将整个div扩展到结束。这里有什么要改变的？

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

-Thanks

已编辑 - 我找到了解决方案让它发挥作用。我添加了'position：absolute;'属性为css中的.menu {}。这使它工作......谢谢。

Answer 1

我刚刚在IE7上测试了它对我的工作正常 http://jsfiddle.net/vcN5g/

Answer 2

我找到了解决方案让它发挥作用。我添加了'position：absolute;'属性为css中的.menu {}。这使它工作......谢谢。

下拉导航菜单栏在IE7中工作，但在FireFox中不起作用

2 个答案: