Firefox中的下拉菜单中断 - 表格单元有问题？

我有一个歪斜的下拉菜单，它的工作方式几乎与我想要的一样，但是在Firefox中，下拉菜单显示在主导航下方。我可以通过删除“display：table-cell”来修复它，但是它会破坏其他属性并导致nav不能正确缩放。（为响应网站设计）对于Firefox的修复任何建议？Firefox中的下拉菜单中断 - 表格单元有问题？

<html> 
    <head> 
    <meta content="text/html; charset=utf-8" 
      http-equiv="Content-Type" /> 

    <title>test doc1</title> 

    <!-- hack for bug in Web Developer addon for Firefox. Used for 
    development and debugging only--> 
    <link rel="stylesheet" 
     type="text/css" href="x" /> 

    <style type="text/css"> 

    .menu_nav 
    { 
     position:relative; 
    } 

    nav ul { 
     display: table; 
     height: 2em; 
     list-style:none; 
     width:95%; 
     font-family:BentonSans, helvetica, verdana, sans-serif; 
     font-size:81.3%; 


     } 

    nav ul li { 
     color: white; 
     font-weight:bold; 
     display: table-cell; 
     height: 2em; 
     padding: 0 2em 0 2em; 
     -moz-transform: skew(25deg); 
     -o-transform: skew(25deg); /* Opera fails */ 
     -webkit-transform: skew(25deg); 
     -ms-transform: skew(25deg); 
     transform: skew(25deg); 
     vertical-align:middle; 
     text-align: center; 
     border-left:.25px solid white; 
     position:relative; 
     background:#cc0000; 

     } 

     nav ul li a { 
     color: inherit; 
     display: block; 
     text-decoration: none; 
     -moz-transform: skew(-25deg); 
     -o-transform: skew(-25deg); 
     -webkit-transform: skew(-25deg); 
     -ms-transform: skew(-25deg); 
     transform: skew(-25deg); 
     padding:1em; 
     } 

     nav ul dl { 
     display:none; 
     -moz-transform: skew(-25deg); 
     -o-transform: skew(-25deg); 
     -webkit-transform: skew(-25deg); 
     -ms-transform: skew(-25deg); 
     transform: skew(-25deg); 
     float:left; 
     background:none repeat scroll #fff; 
     padding:0; 
     margin:0 
      } 

nav ul li dl {position:absolute; left:-2em; background:none repeat scroll #fff; } 

nav ul li dl a{display: block;} 

     nav ul dl li { 
     font-size:12px; 
     float:left; 
     color:#fff; 
     -moz-transform: skew(0deg); 
     -o-transform: skew(0deg); 
     -webkit-transform: skew(0deg); 
     -ms-transform: skew(0deg); 
     transform: skew(0deg); 
     width:100%; 
     height:37px; 
     background:#ddd; 
     padding:0; 
     margin-left:10px; 
     padding-left:10px; 
     } 
     nav ul dl li a { 
     width:100%; 
     color: inherit; 
     display: block; 
     text-decoration: none; 
     -moz-transform: skew(0deg); 
     -o-transform: skew(0deg); 
     -webkit-transform: skew(0deg); 
     -ms-transform: skew(0deg); 
     transform: skew(0deg); 
     color:#000; 
     float:left; 
     text-align:left; 
     padding:10px 0; 
     } 

     nav ul li:hover > dl { 
      display:block; 
      background:#ccc; 

     } 
      nav ul li dl li a:hover { 
      display:block; 
      background:#ccc; 

     } 



    </style> 
    </head> 

    <body> 
    <h1>Project</h1> 
    <nav> 
    <ul> 
     <li><a href="#"><span>ABOUT</span></a> 
     <dl> 
      <li class="menu_nav"><a href="#">HISTORY</a></li> 
      <li><a href="#">MISSION</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>COMMUNITY ENGAGEMENT</span></a> 
     <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>STRATETIC INVESTMENTS</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>CHARITABLE GIVING</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
     <li><a href="#"><span>NEWS</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
     <li><a href="#"><span>MULTIMEDIA</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
    </ul> 
    </nav> 
    </body> 
</html>

来源

2014-03-26 user2561920

我想起了一个不喜欢“display：table-cell”中'position：absolute'的浏览器。快速谷歌搜索带给我这个：http://davidwalsh.name/table-cell-position-absolute – brouxhaha

我不知道如何解决它，虽然 – user2561920

检查了这一点http://jsfiddle.net/wNhD8/2/

我加white-space: nowrap;到nav ul

display: inline-block;到nav ul li

margin-left:-5px;到nav ul li

去除的白左边框从nav ul li

来源

2014-03-26 22:32:14 enapupe

哦真棒 - 我会给这个试试谢谢！只是真的很快 - 你看到下降的下跌类似于在导航的一部分重叠？有什么方法可以解决它吗？ – user2561920

是的，它应该总是在红色背景之后？ – enapupe

不只是正好在它下面 – user2561920

Firefox中的下拉菜单中断 - 表格单元有问题？

回答

相关问题