html - CSS - 可见性问题：隐藏；在下拉菜单上

Question

ul.ulDropMenu{
z-index: 2;
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
    color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;      
}
ul.ulDropMenu li ul li{
width: 135px;
}

ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
} 

.navBar {
  background-color: #2A2A2A;
  min-width: 100%;
}
.wrapper {
  max-width: 100%;
  padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding-top: 15px;
}
nav ul a {
  color: #7f7f7f;
  text-decoration: none;
  transition: color .4s ease;
  font-size: 18px;
}
nav ul li ul li a{
    font-size: 15px;
}
nav ul a:hover {
  color: #afafaf;
}
nav li {
  display: inline-block;
}
nav #menu-toggle {
  display: none;
}
nav .label-toggle {
  display: none;
}
nav .wrapper {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 992px) {
  nav nav ul li ul li {
    color: #7f7f7f;
    padding-right: 20px;
  }
  nav ul {
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: left;
    padding-left: 0;
    transition: all 1s ease;
    width: 50%;
    visibility: hidden;
  }
  nav li {
    color: #53354A;
    display: block;
    font-size: 19px;
  }
  nav #menu-toggle:checked ~ ul {
    opacity: 1;
    height: 62vh;
    visibility: visible;
  }
  nav .label-toggle {
    background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 35px;
    margin-top: 35px;
    width: 35px;
  }
  nav .wrapper {
    display: block;
  }
}

<nav class="navBar">
  <nav class="wrapper">
    <a href=""><img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt=""></a>
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul class="ulDropMenu">
      <li>
        <a href="">Menu 1</a>
      </li>     
        <li>
          <a href="#">Menu 2
          <i class="fa fa-caret-down"></i>         
          </a>
            <ul> 
              <li>
                <a href="">1</a>
              </li>
              <li>
                <a href="">2</a>
              </li>
            </ul>
        </li>
      <li>
        <a href="#">Menu 3
        <i class="fa fa-caret-down"></i>                 
        </a>
        <ul>                     
          <li>
            <a href="" target="_blank"><i class="fab fa-facebook-square"></i> Facebook</a>
            <a href="" target="_blank"><i class="fab fa-twitter-square"></i> Twitter</a>
            <a href="" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>

点击“Run code snipped”和“full page”查看截图，调整屏幕大小到992px以下。

当我在 992px 下调整屏幕大小时，问题就开始了。底部变大navbar了，下拉菜单打不开，我认为这可能是由于错误，display: block但我认为不是。我在这里做了一些测试，我意识到这个问题是由这一行引起的：

nav ul {
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: left;
    padding-left: 0;
    transition: all 1s ease;
    width: 50%;
    visibility: hidden; //This line
  }

但如果我拿出visibility: hidden;我的可折叠菜单将无法工作。

我该如何解决？

标签： htmlcsshtml-listsvisibility

Answer 1

你的css很乱。您在导航栏上有不需要的空间，因为ul.ulDropMenu它始终可见，并且它padding-top: 15px继承.nav ul自默认浏览器设置并继承自默认浏览器设置。我建议您先阅读有关重置的内容

/* basic reset for all elements */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

ul.ulDropMenu{
    z-index: 2;
    padding: 0; /* override padding set by '.nav ul' */
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
    color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
height: auto; /* override height set in '.nav ul' */
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;
z-index: 1;
}
ul.ulDropMenu li ul li{
width: 135px;
}

ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
} 

.navBar {
  background-color: #2A2A2A;
  min-width: 100%;
}
.wrapper {
  max-width: 100%;
  padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding-top: 15px;
}
nav ul a {
  color: #7f7f7f;
  text-decoration: none;
  transition: color .4s ease;
  font-size: 18px;
}
nav ul li ul li a{
    font-size: 15px;
}
nav ul a:hover {
  color: #afafaf;
}
nav li {
  display: inline-block;
}
nav #menu-toggle {
  display: none;
}
nav .label-toggle {
  display: none;
}
nav .wrapper {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 992px) {
  nav nav ul li ul li {
    color: #7f7f7f;
    padding-right: 20px;
  }
  nav ul {
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: left;
    padding-left: 0;
    transition: all 1s ease;
    width: 50%;
    visibility: hidden;
  }
  nav li {
    color: #53354A;
    display: block;
    font-size: 19px;
  }
  nav #menu-toggle:checked ~ ul {
    opacity: 1;
    height: 62vh;
    visibility: visible;
  }
  nav .label-toggle {
    background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 35px;
    margin-top: 35px;
    width: 35px;
  }
  nav .wrapper {
    display: block;
  }
}

<nav class="navBar">
  <nav class="wrapper">
    <a href=""><img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt=""></a>
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul class="ulDropMenu">
      <li>
        <a href="">Menu 1</a>
      </li>     
        <li>
          <a href="#">Menu 2
          <i class="fa fa-caret-down"></i>         
          </a>
            <ul> 
              <li>
                <a href="">1</a>
              </li>
              <li>
                <a href="">2</a>
              </li>
            </ul>
        </li>
      <li>
        <a href="#">Menu 3
        <i class="fa fa-caret-down"></i>                 
        </a>
        <ul>                     
          <li>
            <a href="" target="_blank"><i class="fab fa-facebook-square"></i> Facebook</a>
            <a href="" target="_blank"><i class="fab fa-twitter-square"></i> Twitter</a>
            <a href="" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>