下拉导航菜单栏是工作在IE7，但不能在Firefox

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

编辑 - 我已经找到了解决方案，得到它的工作。我添加了“位置：绝对;”属性为CSS中的.menu {}。这使它工作......谢谢。

Answer 1

我已经找到了解决方案，得到它的工作。我添加了“位置：绝对;”属性为CSS中的.menu {}。这使它工作......谢谢。

Answer 2

我只是在IE7测试其工作细到我 http://jsfiddle.net/vcN5g/