html - 双普通和大型菜单

Question

我正在尝试制作一个带有大型菜单和普通菜单的导航栏 但问题出在我的大型菜单中，我希望 li 和所有 ul 元素一起显示，但在普通菜单中，我希望 ul > 仅当 li 悬停时才显示元素。

而且我无法避免第一个的 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">
	<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>

需要说明的是，我尝试为 commande 使用大型菜单，为 Boutique 使用普通菜单。

Answer 1

也许您可能想重写样式以将大型菜单 和普通菜单 样式分开，但我已经进行了一些调试并将以下内容添加到min-width:480px 在悬停时在桌面 View 中显示大型菜单的媒体查询:

  .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>