Css 水平下拉菜单可见性答案

【问题标题】：Css Horizontal Dropdown Menu VisibilityCss 水平下拉菜单可见性
【发布时间】：2017-02-03 20:05:55
【问题描述】：

这是 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 个产品。但是由于我父母的CSS文件存在问题。当我单独实现它时它工作正常。

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

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

【问题讨论】：

首先你需要把一个ul放在一个li中，而不是li放在一个li中
并确保您的新 CSS 格式正确。它不见了；在几个地方。
是的，我已经更新了我的 HTML 和 CSS。我错误地写了
和
标签。感谢您的帮助和回复@Keith