CODEWITHSUNDEEP
javascriptjquerycssmenu
Coding Duchess
Coding Duchess

Reputation: 6909

CSS - menu items overlapping

I have a menu with two menu items and when the user clicks on each item, a sub-menu is displayed.

The issues is both menues displayed at the same spot - under the first item. I have been tweaking it for a while but cannot figure out a way to fix the issue.

Also I need to make sure as one menu item clicked, the sub-menu for the other item disappears. Can anyone point me in the right direction?

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

Upvotes: 1

Views: 1217

Answers (2)

magiclantern
magiclantern

Reputation: 798

For the positioning, set display: inline-block on #nav-mobile li and give it a width. In this example, I set its min-width to 5em but do what makes sense in your design.

To close the other one there’s a few options but just doing $(this).siblings().children(".dropdown-content").hide(); may be enough.

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

Upvotes: 2

Kushtrim
Kushtrim

Reputation: 1939

Add position: relative to #nav-mobile li and left: -50px or your desired value to dropdown.

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

Upvotes: 1

Related Questions