javascript - 如何让下拉菜单正确显示？

Question

我不知道有多少代码需要向您展示，但老实说，我不知道如何解决我的问题，所以我将全部列出来。我的移动版网站有一个下拉菜单，几乎已经完成。这是我拉出菜单(menu div)时的样子:

Home
About
Contact

我现在的问题是子菜单。当我点击它们时，我看到类似这样的内容(li ul 顶部的空白空间和下一个菜单项被遮盖):

Home
                        <---empty space
  My dropdown li
  My dropdown li 2
  My dropdown li 3
Contact

我试过弄乱边距，我试过改变显示类型，我试过改变位置类型......我最接近让它正常工作的是在li ul 去掉了空白，但它仍然掩盖了“关于”。我只是不明白我能做些什么来修复 css!非常感谢任何帮助!!

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
 $("#menu").click(function() {
   $("#nav").toggle();
 });
 $(window).resize(function() {
   if (window.innerWidth > 768) {
     $("#nav").removeAttr("style");
   }
 });

 $('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
 });

ul {
  width: 100%;
  position: absolute;
  top: 51px;
  left: 0 !important;
  z-index: 100;
}
li ul {
  display: block;
  width: 100%;
  position: relative;
}
li ul li {} li {
  width: 33%;
  float: left;
  list-style: none;
  padding-left: 0;
}
li:last-child {
  border-right: none;
}
li a {
  display: block;
  background: #879270;
  padding: 4% 10%;
  font-size: 1.35em;
  text-decoration: none;
  list-style: none;
  text-align: left;
  color: #000000 !important;
}
@media screen and (min-width: 768px) {
  #menu {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #menu {
    width: 1.4em;
    display: block;
    background: #879270;
    font-size: 1.35em;
    text-align: center;
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 10px;
    border-radius: 3px;
    border: 1px solid #000000;
    padding-top: 5px;
  }
  #nav.js {
    display: none;
  }
  ul {
    width: 100%;
  }
  li {
    width: 100%;
    border-right: none;
  }
}
li.dropdown ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
  <li class="dropdown"><a href="#">Home</a>
    <ul>
      <li><a href="#">My Dropdown li</a>
      </li>
      <li><a href="#">My Dropdown li 2</a>
      </li>
      <li><a href="#">My Dropdown li 3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">About</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Answer 1

您在 ul 上有 top 值(top: 51px;)，它继承到您的子菜单。将 top: 0; 添加到 li ul 以便它不会在子菜单上继承。

ul {
  width: 100%;
  position: absolute;
  top: 51px;
  left: 0 !important;
  z-index: 100;
}

li ul {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
}

li ul li {}

li {
  width: 33%;
  float: left;
  list-style: none;
  padding-left: 0;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  background: #879270;
  padding: 4% 10%;
  font-size: 1.35em;
  text-decoration: none;
  list-style: none;
  text-align: left;
  color: #000000 !important;
}

@media screen and (min-width: 768px) {
  #menu {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #menu {
    width: 1.4em;
    display: block;
    background: #879270;
    font-size: 1.35em;
    text-align: center;
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 10px;
    border-radius: 3px;
    border: 1px solid #000000;
    padding-top: 5px;
  }
  #nav.js {
    display: none;
  }
  ul {
    width: 100%;
  }
  li {
    width: 100%;
    border-right: none;
  }
}

li.dropdown ul {
  display: none;
}

<ul id="nav">
  <li class="dropdown"><a href="#">Home</a>
    <ul>
      <li><a href="#">My Dropdown li</a></li>
      <li><a href="#">My Dropdown li 2</a></li>
      <li><a href="#">My Dropdown li 3</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
  $("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").toggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });

    $('li.dropdown').click(function() {
   $('li.dropdown').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});
</script>