CSS - 菜单项重叠

Question

我有一个包含两个菜单项的菜单，当用户单击每个项目时，会显示一个子菜单。

问题是两个菜单都显示在同一位置 - 在第一项下方。我已经对其进行了一段时间的调整，但无法找到解决问题的方法。

我还需要确保在单击一个菜单项时，另一项的子菜单会消失。谁能指出我正确的方向？

$(document).ready(function(){
  $('.menu-item').on('click', function() { 
    $(this).children(".dropdown-content").toggle(); 
  });
});

#nav {
  width: 100%;
  height: 3em;
  color: #fff;
  line-height: 3em;
}

#nav .nav-wrapper {
  height: 100%;
  position: relative;
  top: 0;
}

.right {float: right !important;}

#nav-mobile {
  list-style-type: none;
  margin-top: 0; 
}

#nav-mobile li { 
  display: inline;
  margin: 0 2.5em 1.5em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

#nav-mobile li a { 
  text-decoration: none;
  /*position: relative;*/
}

#nav-mobile li img { 
  position: relative;
  top: .4em;
}

#nav-mobile li .dropdown-content { 
  display: none;
  position: absolute;
  color: #188CCC;
  background-color: white;
  z-index: 1;
  box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
  min-width: 120px;
}

#nav-mobile li .dropdown-content li { 
  display: block;
  margin:0;
  width: 100%;
}

#nav-mobile li .dropdown-content li a { 
  display: block;
  margin:0;
  padding: 0.25em 1.75em 0.25em 1.2em;
}

#nav-mobile li .dropdown-content li:hover { 
  background-color: #E0E0E0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="nav-mobile">
  <li class="menu-item">
    <img src="images/img1.png">
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
    <ul id="linksdrop" class="dropdown-content">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <img src="images/img2.png">
    <a class="hide-on-med-and-down white-text" href='#'>          <span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li> 
</ul>

Answer 1

对于定位，在#nav-mobile li 上设置display: inline-block 并给它一个宽度。在此示例中，我将其 min-width 设置为 5em，但在您的设计中做有意义的事情。

要关闭另一个有几个选项，但只需执行 $(this).siblings().children(".dropdown-content").hide(); 可能就足够了。

$(document).ready(function(){
  $('.menu-item').on('click', function() {
    $(this).children(".dropdown-content").toggle();
    $(this).siblings().children(".dropdown-content").hide();
  });
});

#nav {
  width: 100%;
  height: 3em;
  color: #fff;
  line-height: 3em;
}

#nav .nav-wrapper {
  height: 100%;
  position: relative;
  top: 0;
}

.right {float: right !important;}

#nav-mobile {
  list-style-type: none;
  margin-top: 0; 
}

#nav-mobile li { 
  display: inline-block;
  margin: 0 2.5em 1.5em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  min-width: 5em;
}

#nav-mobile li a { 
  text-decoration: none;
  /*position: relative;*/
}

#nav-mobile li img { 
  position: relative;
  top: .4em;
}

#nav-mobile li .dropdown-content { 
  display: none;
  position: absolute;
  color: #188CCC;
  background-color: white;
  z-index: 1;
  box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
  min-width: 120px;
}

#nav-mobile li .dropdown-content li { 
  display: block;
  margin:0;
  width: 100%;
}

#nav-mobile li .dropdown-content li a { 
  display: block;
  margin:0;
  padding: 0.25em 1.75em 0.25em 1.2em;
}

#nav-mobile li .dropdown-content li:hover { 
  background-color: #E0E0E0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="nav-mobile">
  <li class="menu-item">
    <img src="images/img1.png">
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
    <ul id="linksdrop" class="dropdown-content">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <img src="images/img2.png">
    <a class="hide-on-med-and-down white-text" href='#'>          <span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li> 
</ul>

Answer 2

将position: relative 添加到#nav-mobile li 和left: -50px 或您想要的值到下拉列表。

$(document).ready(function() {

  $('.menu-item').on('click', function() {
    $(".dropdown-content").hide();
    $(this).children(".dropdown-content").toggle();
  });
});

#nav {
  width: 100%;
  height: 3em;
  color: #fff;
  line-height: 3em;
}

#nav .nav-wrapper {
  height: 100%;
  position: relative;
  top: 0;
}

.right {
  float: right!important;
}

#nav-mobile {
  list-style-type: none;
  margin-top: 0;
}

#nav-mobile li {
  display: inline;
  margin: 0 2.5em 1.5em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  position: relative;
}

#nav-mobile li a {
  text-decoration: none;
  /*position: relative;*/
}

#nav-mobile li img {
  position: relative;
  top: .4em;
}

#nav-mobile li .dropdown-content {
  display: none;
  position: absolute;
  color: #188CCC;
  background-color: white;
  z-index: 1;
  box-shadow: 0 .5em 1.5em 0 rgba(28, 24, 28, 0.65);
  min-width: 120px;
  left: -50px;
}

#nav-mobile li .dropdown-content li {
  display: block;
  margin: 0;
  width: 100%;
}

#nav-mobile li .dropdown-content li a {
  display: block;
  margin: 0;
  padding: 0.25em 1.75em 0.25em 1.2em;
}

#nav-mobile li .dropdown-content li:hover {
  background-color: #E0E0E0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
  <li class="menu-item">
    <img src="images/img1.png" />
    <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
    <ul id="linksdrop" class="dropdown-content">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <img src="images/img2.png" />
    <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li>
</ul>