Question

这是HTML CODE：

<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文件，我无法实现它。

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

Answer 1

我不能100％判断它是否是问题的原因，但问题可能是<li>元素的嵌套。我无法想出您为什么要将<li>元素嵌套在其他<li>元素中的任何原因：<li>旨在表示一个列表项目 <li>不应用于表示列表项的集 ，因此您要么想要使用<ul>或<span>或<div>，具体取决于您瞄准的行为和外观/布局。在您修复此问题之前，您的CSS永远不会像您预期的那样表现。

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

Css水平下拉菜单可见性

1 个答案: