Question

我有一个带有歪斜的下拉列表，它几乎也是我想要的，但是在Firefox中，下拉部分显示在主导航下方。我可以通过删除“display：table-cell”来修复它，但它会破坏其他属性并使导航无法正确缩放。（为响应式网站设计）有关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>

Answer 1

查看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

中删除了白色边框

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

1 个答案: