CSS - элементы меню перекрываются

Coding Duchess спросил: 13 октября 2017 в 06:37 в: javascript

У меня есть меню с двумя пунктами меню, и когда пользователь щелкает по каждому элементу, отображается подменю.

Проблема заключается в том, что оба меню отображаются в одном месте - под первым элементом. Я настраивал его некоторое время, но не могу найти способ исправить проблему.

Также мне нужно убедиться, что при нажатии одного пункта меню подменю для другого элемента исчезает. Кто-нибудь может указать мне правильное направление?

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


0 ответов