Html 我的基础菜单没有';在Firefox上无法显示
我正在使用Fundation建立我的网站,我在网上找到了一个有趣的代码,并根据我的需要进行了修改。它现在在chrome/Safari上运行得很好,但在firefox上根本不显示。有线索吗 这是我的HTML:Html 我的基础菜单没有';在Firefox上无法显示,html,css,firefox,zurb-foundation,Html,Css,Firefox,Zurb Foundation,我正在使用Fundation建立我的网站,我在网上找到了一个有趣的代码,并根据我的需要进行了修改。它现在在chrome/Safari上运行得很好,但在firefox上根本不显示。有线索吗 这是我的HTML: <!-- NAV BAR --> <div class="row show-for-large-up"> <div class="mega-menu"> <nav class="
<!-- 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>
你真的重新设计了每个菜单点的边距和所有内容吗?基金会为你做的非常好。你可能在路上摔坏了什么东西。既然我不会为你重构你的代码,我只是猜测你的firefox窗口太小了,无法满足媒体查询“show for large up”的条件@NicoO我真的很傻,没有想到这一点。谢谢你的利润建议,我以后会优化所有这些。谢谢你的回答,非常欢迎。不要太担心,我们都去过那里;)
.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;
}