我有一个倾斜的下拉菜单，这也是我想要的，但是在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>
看看这个http://jsfiddle.net/wNhD8/2/
我把white-space: nowrap;加到nav ul
display: inline-block;到nav ul li
margin-left:-5px; to nav ul li
去掉nav ul li的白色左边框