javascript - Css 水平下拉菜单可见性

Question

这是 HTML 代码:

<nav id="SA-main-menu" role="navigation">
    <ul>
        <li class="SA-active"><a href="#">Home</a></li>
        <li class="sub-menu-parent"><a href="#">Products</a>
            <li class="sub-menu">
                <li><a href="#">asdsa</a></li>
                <li><a href="#">dsad</a></li>
                <li><a href="#">dasdas</a></li>
                <li><a href="#">dsadsddaxx</a></li>
                <li><a href="#">qwer</a></li>
                <li><a href="#">zxcss</a></li>
            </li>
        </li>
        <li><a href="#"> Our Work </a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</nav>

这是我的新 CSS(为下拉菜单实现但不起作用):

.sub-menu-parent { position: relative; }
.sub-menu { 
  visibility: hidden  /* hides sub-menu */
  opacity: 0 
  position: absolute ;
  top: 100% ;
  left: 0 ;
  width: 100% ;
  transform: translateY(-2em) ;
  z-index: -1 ;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s ;
}
.sub-menu-parent:hover #sub-menu {
  visibility: visible  /* shows sub-menu */
  opacity: 1 ;
  z-index: 1 ;
  transform: translateY(0%) ;
  transition-delay: 0s, 0s, 0.3s ; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

这是我的父 CSS 有一些问题:

#SA-aside #SA-main-menu ul {
  text-align: left;
  margin: 2.2em 0 0 1.8em;
  padding: 0;
}
@media screen and (max-width: 768px) {
  #SA-aside #SA-main-menu ul {
    margin: 0 0 1.8em 0;
  }
}
@media screen and (max-width: 1200px) {
  #SA-aside #SA-main-menu ul {
    margin: 0 0 0.5em 0;
  }
}
#SA-aside #SA-main-menu ul li {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  line-height: 2.1;
}
#SA-aside #SA-main-menu ul li a {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 0.6em;
  font-weight: 300;
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  padding: 8px 8px;
  letter-spacing: .1em;
  font-family: "stoneart", Arial, sans-serif;
}
#SA-aside #SA-main-menu ul li a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 7px;
  left: 10px;
  right: 10px;
  background-color: #A55847;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#SA-aside #SA-main-menu ul li a:hover {
  text-decoration: none;
  color: black;
}
#SA-aside #SA-main-menu ul li a:hover:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-aside #SA-main-menu ul li.SA-active a {
  color: black;
}
#SA-aside #SA-main-menu ul li.SA-active a:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-main-menu ul li.dropdown {
  display: none;
}
#SA-main-menu ul li:hover ul#SA-sub-menu{
  display: block;
  background-color: #fdf8ee;
  z-index: 112;
}
#SA-main-menu ul li ul#SA-sub-menu{
  display: none;
  background: #ffffff;
  position: relative;
  width: 100%;
  margin: -8em 0 0 5em;
  padding-top: 1.5em;
  padding-bottom: 0.5em;
  z-index: 112;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  -o-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
}
#SA-main-menu ul li ul#SA-sub-menu li {
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  line-height: 1.5;
}
#SA-main-menu ul li ul#SA-sub-menu li a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  text-transform: capitalize;
  font-size: 10px;
  font-weight: 300;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  font-family: "stoneart", Times, serif;
}
#SA-main-menu ul li ul#SA-sub-menu li a:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 7px;
  left: 10px;
  right: 10px;
  background-color: #A55847;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#SA-main-menu ul li ul#SA-sub-menu ul li a:hover {
  text-decoration: none;
  color: black;
}
#SA-main-menu ul li ul#SA-sub-menu ul li a:hover:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#SA-main-menu ul li ul#SA-sub-menu li.SA-active a {
  color: black;
}
#SA-main-menu ul li ul#SA-sub-menu li.SA-active a:after {
  visibility: hidden;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

基本上我想显示菜单产品，其中有 6 个其他产品。我希望当我将鼠标悬停在产品上时，应该显示所有其他 6 种产品。但是由于我 parent 的 CSS 文件存在问题。当我单独实现它时它工作正常。

这就是我想要的- http://codepen.io/anon/pen/Gjmjjb但由于父级 CSS 文件，我无法实现它。

请看一下。我只是犯了一个小错误，但我不知道在哪里。

Answer 1

我不能 100% 判断这是否是问题的原因，但问题很可能是 <li> 的嵌套元素。我想不出你想要嵌套的任何理由 <li>其他里面的元素<li>像你这样的元素:<li>旨在表示列表项， <li>不应该用来表示列表项的集合，所以您要么想要使用<ul>或 <span>或 <div>具体取决于您的目标行为和外观/布局。在解决此问题之前，您的 CSS 永远不会按照您预期的方式运行。

如果您解决了这个问题，但它仍然没有按预期运行，请发布您更新后的代码，我会查看一下，看看我还能找到哪些其他问题。但是，我强烈建议首先解决这个基本问题，因为即使您找到了一种方法来修复 CSS 以按预期运行，但不正确地使用 HTML 元素总是可能会导致后续问题。