Question

请指导我如何从下面的代码中创建<ul id="nav">和<ul class="sub-menu">的高度0，以及如何在点击/触摸时显示jQuery到<div class="handle">。

我尝试使用ul设置max-height:0;，但没有发生任何变化。我也尝试使用ul#nav li设置max-height:0;，但没办法。

@charset"utf-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
}
.clear {
  clear: both;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#nav li {
  background: #fff;
  float: left;
}
ul#nav li a {
  color: black;
  display: block;
  background: #fff;
  padding: 10px;
  text-decoration: none;
  border-bottom: 1px solid green;
}
ul#nav li a:hover {
  background: #000;
  color: white;
}
ul#nav li .sub-list {
  float: none;
}
.sub-menu {
  display: none;
}
ul#nav li:hover .sub-menu {
  display: block;
  position: absolute;
}
.handle {
  display: none;
}
@media screen and (max-width: 480px) {
  body {
    background: #CFF;
  }
  ul#nav li {
    width: 100%;
  }
  .handle {
    display: block;
    background: #093;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
  }
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" href="nav.css">
</head>

<body>
  <div class="container">
    <nav>
      <div class="handle">Menu</div>
      <ul id="nav">
        <li><a href="#">Available Stock</a>

        </li>
        <li>	<a href="#">Purchase</a>

          <ul class="sub-menu">
            <li class="sub-list"><a href="#">Purchase Return</a>

            </li>
          </ul>
          <li>	<a href="#">Sale</a>

            <ul class="sub-menu">
              <li class="sub-list"><a href="#">Sale Return</a>

              </li>
            </ul>
          </li>
          <li><a href="#">Cash Recieve</a>

          </li>
          <li><a href="#">Cash Payment</a>

          </li>
          <li><a href="#">Cash Recieve</a>

          </li>
          <li>	<a href="#">New</a>

            <ul class="sub-menu">
              <li class="sub-list"><a href="#">New Customer</a>

              </li>
              <li class="sub-list"><a href="#">New Supplier</a>

              </li>
              <li class="sub-list"><a href="#">New Town</a>

              </li>
              <li class="sub-list"><a href="#">New Product</a>

              </li>
            </ul>
          </li>
          <li><a href="#">Opening Stock</a>

          </li>
          <li><a href="#">Gate Pass</a>

          </li>
          <li><a href="#">Sale History</a>

          </li>
      </ul>
    </nav>
  </div>
</body>

</html>

需要帮助下面的css代码

0 个答案: