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>