Question

我不知道有多少代码需要向您展示，但老实说我无法弄清楚如何解决我的问题，所以我只是列出所有内容。我有一个下载菜单，我的网站的移动版本几乎完成。这是我拉出菜单（菜单div）时的样子：

Home
About
Contact

我现在的问题是子菜单。当我点击它们时，我看到类似这样的东西（li ul顶部的空白区域和下一个菜单项覆盖）：

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

我已经尝试过利润，我尝试改变显示类型，我尝试过改变位置类型......我最接近让它正常工作是在li ul上使用负边距来摆脱空白区域，但它仍然掩盖了＆＃34; about＆＃34;。我只是不明白我能做些什么来修复CSS！非常感谢任何帮助!!

＆＃13;

$("#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();
 });

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您在top继承您子菜单的top: 51px;值（ul）。将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>

如何正确显示下拉列表？

1 个答案: