我正在使用Fundation来构建我的网站，我在网上找到了一个有趣的代码，并根据我的需要进行了调整。它现在在chrome / Safari上非常好用，但只是不在firefox上显示。任何线索？
这是我的HTML：
<!-- NAV BAR -->
<div class="row show-for-large-up">
<div class="mega-menu">
<nav class="top-bar" data-topbar="">
<section class="top-bar-section">
<ul class="left">
<!-- Menu 1 -->
<li>
<a href="#" data-dropdown="menu-1" data-options="is_hover:true" >
<strong>Catégorie 1</strong>
</a>
<div id="menu-1" data-dropdown-content="" class="large f-dropdown content row">
<!-- Heading 1 -->
<div class="row">
<div class="large-3 columns">
<img src="images/enfants.png" height="265px" width="265px" alt="">
</div>
<div class="large-9 columns">
<div class="large-12 columns">
<h3>Enfants</h3>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat-button">
<a href="#" class="button large alert round right">Découvrir</a>
</div>
</div>
</div>
</div>
</li>
<!-- Menu 2 -->
<li>
<a href="#" data-dropdown="menu-2" data-options="is_hover:true">
<strong>Catégorie 2</strong>
</a>
<div id="menu-2" data-dropdown-content="" class="large f-dropdown content row">
<!-- Heading 1 -->
<div class="row">
<div class="large-3 columns" style="margin-top:1.5%;">
<img src="images/enfants.png" height="265px" width="265px" alt="">
</div>
<div class="large-9 columns">
<div class="large-12 columns">
<h3>Bijoux</h3>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat-button">
<a href="#" class="button large alert round right">Découvrir</a>
</div>
</div>
</div>
</div>
</li>
<!-- Menu 3 -->
<li>
<a href="#" data-dropdown="menu-3" data-options="is_hover:true">
<strong>Catégorie 3</strong>
</a>
<div id="menu-3" data-dropdown-content="" class="large f-dropdown content row">
<!-- Heading 1 -->
<div class="row">
<div class="large-3 columns">
<img src="images/enfants.png" height="265px" width="265px" alt="">
</div>
<div class="large-9 columns">
<div class="large-12 columns">
<h3>Maison</h3>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat">
<a href="#">Sous-catégorie 1</a><br>
<a href="#">Sous-catégorie 2</a><br>
<a href="#">Sous-catégorie 3</a><br>
<a href="#">Sous-catégorie 4</a><br>
<a href="#">Sous-catégorie 5</a><br>
</div>
<div class="large-4 columns subcat-button">
<a href="#" class="button large alert round right">Découvrir</a>
</div>
</div>
</div>
</div>
</li>
<li class="spacer"></li>
</ul>
<ul class="right l_nav-input">
<li class="has-form">
<div class="row collapse">
<div class="large-10 medium-10 columns l_nav-input">
<input type="text" placeholder="Rechercher">
</div>
<div class="large-2 medium-2 columns">
<a href="#"><p class="magnifier"><i class="foundicon-search size-21"></i></p></a>
</div>
</div>
</li>
</ul>
</section>
</nav>
</div>
</div>
这里是CSS（SCSS表示法）：
.mega-menu .open {
border-top: none;
border-color: #CCC;
background: #EBEAEA;
left: 0 !important;
}
.mega-menu .f-dropdown:before,
.mega-menu .f-dropdown:after {
border-style: none;
}
#menu-1{
.row{
border-style: solid;
border-color:#FB6E06;
background-color:#EBEAEA;
margin:-15px -20px -15px -20px;
border-right-style:none;
border-left-style:none;
.large-3{
margin-top:1.5%;
img{
margin-top:0;
margin-left:0;
margin-right:0;
}
}
.large-9{
margin-top:-5px;
.large-12{
h3{
font-family: Paprika;
margin-top:15px;
}
}
.subcat{
text-align:left;
a{
background-color:#EBEAEA;
color:#5d5459;
}
}
.subcat-button{
margin-top: 26%;
}
}
}
}
#menu-2{
.row{
border-style: solid;
border-color:#FB6E06;
background-color:#EBEAEA;
margin:-15px -20px -15px -20px;
border-right-style:none;
border-left-style:none;
.large-3{
margin-top:1.5%;
img{
margin-top:0;
margin-left:0;
margin-right:0;
}
}
.large-9{
margin-top:-5px;
.large-12{
h3{
font-family: Paprika;
margin-top:15px;
}
}
.subcat{
text-align:left;
a{
background-color:#EBEAEA;
color:#5d5459;
}
}
.subcat-button{
margin-top: 26%;
}
}
}
}
#menu-3{
.row{
border-style: solid;
border-color:#FB6E06;
background-color:#EBEAEA;
margin:-15px -20px -15px -20px;
border-right-style:none;
border-left-style:none;
.large-3{
margin-top:1.5%;
img{
margin-top:0;
margin-left:0;
margin-right:0;
}
}
.large-9{
margin-top:-5px;
.large-12{
h3{
font-family: Paprika;
margin-top:15px;
}
}
.subcat{
text-align:left;
a{
background-color:#EBEAEA;
color:#5d5459;
}
}
.subcat-button{
margin-top: 26%;
}
}
}
}
.foundicon-search{
float: left;
}
.magnifier{
display: inline-block;
margin-top: 4px;
margin-left: 4px;
color: $c_orange;
font-weight: 100;
}