雙正常和大型菜單

我試圖與大型菜單和普通菜單一個導航欄，但問題是在我的巨型菜單我想li和所有的ul元素是顯示在一起，但在正常的菜單我想僅當li懸停時，ul元素纔會顯示。雙正常和大型菜單

我不能設法避免第一個的CSS干擾第二個：

html,body,nav, ul, li, a, span{ 
 
    margin:0; padding:0; 
 
} 
 
body{ 
 
    font-family:helvetica; 
 
    font-size:16px; 
 
} 
 
nav ul { 
 
    background-color:#444; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 
nav ul li{ 
 
    list-style-type: none; 
 
} 
 
nav ul li a{ 
 
    padding:.8rem 1rem; 
 
    display:block; 
 
    text-decoration: none; 
 
    color:#f9f9f9; 
 
} 
 
nav ul li:hover{ 
 
    background:rgba(0,0,0, .25); 
 
} 
 

 

 
nav ul li:hover div.sf-mega { 
 
    top: 100%; 
 
} 
 

 

 
nav div.sf-mega ul { 
 
    width: 25%; 
 
    margin-bottom: 40px; 
 
    color: #000; 
 
    box-shadow: none; 
 
} 
 

 
nav div.sf-mega h4 { 
 
    margin-bottom: 15px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav div.sf-mega ul li { 
 
    display: block; 
 
} 
 

 
nav div.sf-mega ul li a { 
 
    margin-top: 10px; 
 
    transition: 0.5s; 
 
    color: #000; 
 
} 
 

 
nav div.sf-mega ul li a:hover { 
 
    color: #4096ee; 
 
} 
 

 
@media only screen and (max-width:480px){ 
 
    .has_children ul li a{ 
 
    padding-left:2rem; 
 
    } 
 
    
 
    .has_children ul .has_children ul a{ 
 
    padding-left:3rem; 
 
    } 
 
    .arrow-down::after{ 
 
    content:"\f107"; 
 
    } 
 
} 
 

 
@media only screen and (min-width:480px){ 
 
    nav ul{ 
 
    flex-direction:row; 
 

 
    } 
 
    nav ul li{ 
 
    position:relative; 
 
    flex:1 0 auto; 
 
    text-align:left; 
 
    } 
 
    .has_children ul, .has_children ul .has_children ul{ 
 
    display:none; 
 
    width:100%; 
 
    position:absolute; 
 
    } 
 
    .has_children ul .has_children ul{ 
 
    left:100%; 
 
    top:0; 
 
    } 
 
    nav ul li:hover ul, .has_children ul .has_children:hover ul{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    } 
 
    
 
}

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu supérieur"> 
 
<ul id="top-menu" class="menu"><li a="" id="nav-menu-item-2105" class="main-menu-item menu-first menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children mega2"><a href="http://localhost/wordpress/commande/" class="menu-link main-menu-link"><span>Commande</span></a><div class="sf-mega"><div class="sf-mega-inner clearfix"> 
 
<ul class="navi first menu-depth-1"> 
 
\t <li a="" id="nav-menu-item-2106" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2107" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link sub-menu-link"><span>Boutique</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2108" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/blog/" class="menu-link sub-menu-link"><span>Blog</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2109" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-markup-and-formatting/" class="menu-link sub-menu-link"><span>Page Markup And Formatting</span></a></li> 
 
\t </ul> 
 
</li> 
 
\t <li a="" id="nav-menu-item-2113" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2112" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3a/" class="menu-link sub-menu-link"><span>Level 3a</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2111" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3b/" class="menu-link sub-menu-link"><span>Level 3b</span></a></li> 
 
\t \t <li a="" id="nav-menu-item-2110" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-image-alignment/" class="menu-link sub-menu-link"><span>Page Image Alignment</span></a></li> 
 
\t </ul> 
 
</li> 
 
</ul> 
 
</div></div></li> 
 
<li a="" id="nav-menu-item-2114" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link main-menu-link"><span>Boutique</span></a> 
 
<ul class="navi first menu-depth-1"> 
 
\t <li a="" id="nav-menu-item-2115" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/page-d-exemple/" class="menu-link sub-menu-link"><span>Page d’exemple</span></a> 
 
\t <ul class="navi navi menu-depth-2"> 
 
\t \t <li a="" id="nav-menu-item-2116" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/page-b/" class="menu-link sub-menu-link"><span>Page B</span></a></li> 
 
\t </ul> 
 
</li> 
 
</ul> 
 
</li> 
 
</ul> 
 
</nav>

要清楚我嘗試對COMMANDE一個大型的菜單和精品店的正常菜單。

來源

2017-09-16 michel lompret

說實話這真的很難明白你正在嘗試做的。你能重新寫一下你的問題嗎？ –

@ Dejan.S我試着總結一下。 –

你的菜單有什麼問題？對我來說，它似乎按預期工作。你徘徊在'commande'下面，你徘徊在更陡峭的地方，它擴展到下一層。那麼最新的問題 –

也許你可能要重寫的樣式保持大型菜單和正常菜單風格分開，但我做了一些調試，並添加下面min-width:480px媒體查詢，顯示在懸停的桌面視圖大型菜單：

.has_children:hover .sf-mega ul { 
    display: flex; 
    width: 100%; 
    flex-direction: row; 
    } 
    .has_children:hover .sf-mega ul .has_children ul { 
    display: flex; 
    flex-direction: column; 
    top: initial; 
    left: 0; 
    }

請參見下面的演示：

html, 
 
body, 
 
nav, 
 
ul, 
 
li, 
 
a, 
 
span { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: helvetica; 
 
    font-size: 16px; 
 
} 
 

 
nav ul { 
 
    background-color: #444; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
nav ul li { 
 
    list-style-type: none; 
 
} 
 

 
nav ul li a { 
 
    padding: .8rem 1rem; 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #f9f9f9; 
 
} 
 

 
nav ul li:hover { 
 
    background: rgba(0, 0, 0, .25); 
 
} 
 

 
nav ul li:hover div.sf-mega { 
 
    top: 100%; 
 
} 
 

 
nav div.sf-mega ul { 
 
    width: 25%; 
 
    margin-bottom: 40px; 
 
    color: #000; 
 
    box-shadow: none; 
 
} 
 

 
nav div.sf-mega h4 { 
 
    margin-bottom: 15px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav div.sf-mega ul li { 
 
    display: block; 
 
} 
 

 
nav div.sf-mega ul li a { 
 
    margin-top: 10px; 
 
    transition: 0.5s; 
 
    color: #000; 
 
} 
 

 
nav div.sf-mega ul li a:hover { 
 
    color: #4096ee; 
 
} 
 

 
@media only screen and (max-width:480px) { 
 
    .has_children ul li a { 
 
    padding-left: 2rem; 
 
    } 
 
    .has_children ul .has_children ul a { 
 
    padding-left: 3rem; 
 
    } 
 
    .arrow-down::after { 
 
    content: "\f107"; 
 
    } 
 
} 
 

 
@media only screen and (min-width:480px) { 
 
    nav ul { 
 
    flex-direction: row; 
 
    } 
 
    nav ul li { 
 
    position: relative; 
 
    flex: 1 0 auto; 
 
    text-align: left; 
 
    } 
 
    .has_children ul, 
 
    .has_children ul .has_children ul { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
    } 
 
    .has_children ul .has_children ul { 
 
    left: 100%; 
 
    top: 0; 
 
    } 
 
    nav ul li:hover ul, 
 
    .has_children ul .has_children:hover ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    
 
    /* ADDED */ 
 
    .has_children:hover .sf-mega ul { 
 
    display: flex; 
 
    width: 100%; 
 
    flex-direction: row; 
 
    } 
 
    .has_children:hover .sf-mega ul .has_children ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    top: initial; 
 
    left: 0; 
 
    } 
 
    .sf-mega ul li a { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
}

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu supérieur"> 
 
    <ul id="top-menu" class="menu"> 
 
    <li a="" id="nav-menu-item-2105" class="main-menu-item menu-first menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children mega2"><a href="http://localhost/wordpress/commande/" class="menu-link main-menu-link"><span>Commande</span></a> 
 
     <div class="sf-mega"> 
 
     <div class="sf-mega-inner clearfix"> 
 
      <ul class="navi first menu-depth-1"> 
 
      <li a="" id="nav-menu-item-2106" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
       <ul class="navi navi menu-depth-2"> 
 
       <li a="" id="nav-menu-item-2107" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link sub-menu-link"><span>Boutique</span></a></li> 
 
       <li a="" id="nav-menu-item-2108" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/blog/" class="menu-link sub-menu-link"><span>Blog</span></a></li> 
 
       <li a="" id="nav-menu-item-2109" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-markup-and-formatting/" class="menu-link sub-menu-link"><span>Page Markup And Formatting</span></a></li> 
 
       </ul> 
 
      </li> 
 
      <li a="" id="nav-menu-item-2113" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a> 
 
       <ul class="navi navi menu-depth-2"> 
 
       <li a="" id="nav-menu-item-2112" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3a/" class="menu-link sub-menu-link"><span>Level 3a</span></a></li> 
 
       <li a="" id="nav-menu-item-2111" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3b/" class="menu-link sub-menu-link"><span>Level 3b</span></a></li> 
 
       <li a="" id="nav-menu-item-2110" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-image-alignment/" class="menu-link sub-menu-link"><span>Page Image Alignment</span></a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li a="" id="nav-menu-item-2114" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link main-menu-link"><span>Boutique</span></a> 
 
     <ul class="navi first menu-depth-1"> 
 
     <li a="" id="nav-menu-item-2115" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/page-d-exemple/" class="menu-link sub-menu-link"><span>Page d’exemple</span></a> 
 
      <ul class="navi navi menu-depth-2"> 
 
      <li a="" id="nav-menu-item-2116" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/page-b/" class="menu-link sub-menu-link"><span>Page B</span></a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2017-09-16 12:08:21 kukkuz

謝謝，這正是我所期待的。我有最後一個問題kukkuz有沒有一種方法可以爲該列提供相同的高度。 commande中的兩列在這裏有不同的高度：https://codepen.io/anon/pen/MEaaJr –

我已經在問題中添加了一個圖片來向你展示我正在談論的身高 –

@michellompret yup明白了，但在目前的設計中，在所有情況下都很難保證相同的高度......也許你可以使用'.sf-mega ul li a white-space：nowrap; text-overflow：ellipsis; 溢出：隱藏; }'見上面編輯的答案... – kukkuz

雙正常和大型菜單

回答

相關問題