双正常和超级菜单

Question

我正在尝试使用超级菜单和普通菜单制作导航栏 但问题是在我的超级菜单中我希望li和所有ul元素一起显示，但在普通菜单中我希望ul元素只显示{{1悬停。

我无法避免第一个的css干扰第二个：

＆＃13;

＆＃13;

li

＆＃13;

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;
  }
  
}

＆＃13;

＆＃13;

＆＃13;

为了清楚起见，我尝试为精品店提供一个大型菜单，并为精品店提供普通菜单。

Answer 1

也许您可能想要重写样式以保持 mega菜单和普通菜单样式分开，但我已完成一些调试并将以下内容添加到{{ 1}}媒体查询在悬停时在桌面视图中显示 mega菜单：

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;
}
}