CSS - tackling the issue of menu items overlapping

My menu has two items, and when the user clicks on each item, a sub-menu is displayed.

The issue is that both menus are displaying at the same spot - under the first item. I've tried tweaking it for a while but can't seem to fix the problem.

Additionally, I need to make sure that when one menu item is clicked, the sub-menu for the other item disappears. Can anyone help me out with this?

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

javascriptjquerycssmenu

Answer №1

If you want to adjust the positioning, make sure to apply display: inline-block to #nav-mobile li and specify a width for it. You can set the min-width to any value that suits your design needs.

To hide other dropdowns when one is clicked, you can simply use 

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

To make the dropdown menu work properly, you need to include position: relative in the CSS for #nav-mobile li and set the value of left to -50px or your desired position.

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

#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; /* Add your desired value here */
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

webtypographycss

Transforming the file name in real time while uploading with jQuery uploadify

Currently, I am using uploadify, which is a jQuery plugin, to facilitate the uploading of files while adding clients to my database. One challenge I encountered was attaching files to new clients who have not yet been added to the database. To address thi ...

phpjqueryuploadify

What is the best method to set variables to zero using this array in JavaScript?

I am looking to extract strings from an array and set them all to zero. The original array consists of: var myArray = ["apple", "banana", "cherry", "date"]; The expected outcome should be: var apple = 0; var banana = 0; var cherry = 0; var date = 0; I ...

javascript

After utilizing a while loop with class objects, make sure to reset them afterwards

I am facing a dilemma due to Js referencing objects. Within my Js "class," I have created a new player with various variables, strings, arrays, and functions to check specific conditions related to those variables. As part of my code, I am running a whil ...

javascript

Tips for designing a personalized payment page in PayPal for flexible one-time and subscription-based payments

How can I display a PayPal checkout page with custom fields such as tax and total amount when a user makes a payment for a custom amount? Can multiple fields like sales tax and total amount be added? In addition to that, our web application already has Pa ...

javascriptangularpaypalcheckoutpaypal-subscriptions

CAUTION: Attempted to load angular multiple times while loading the page

I encountered a warning message while working on my project, causing errors in calling backend APIs due to duplicate calls. Despite attempting previously suggested solutions from the forum, I am stuck and seeking assistance. Can anyone provide guidance? Be ...

javascriptjqueryangularjs

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

javascripthtmlobject

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

Is there a way to assign multiple paths to a single page within the NextJS pages directory?

I'm currently working on a project that has two different themes, and I have the ability to switch between them based on the environment. Everything works perfectly, but I'm encountering an issue with paths. Some pages should open with different ...

javascriptreactjsnext.jsnext.js13

Tips for loading JSON data into the select2 plugin

My goal is to extract the last two letters (in this case "VA") from the data attribute (data-code="US-VA") of a jvectormap-element using JVectormap. I want to compare these letters with State objects in the database and then load corresponding counties in ...

javascriptjqueryjquery-select2jvectormap

Experiencing a blank array when using filtering/search text in a Nodejs application with MongoDB

I am experimenting with search functionality in a MongoDB database using Node.js. However, my result array is always empty. I have shared my code here and would appreciate some assistance in identifying the issue. Whenever I perform a search, I end up with ...

javascriptnode.jsmongodb

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

javascripthtmldatedatetime

JavaScript regular expressions: filtering out results from the output

I'm trying to extract a specific number from a dynamically added string. The text looks like this: nisi non text600 elit, where 600 is the number I need to retrieve. Is there a way to achieve this without replacing the word text? var str = ('nis ...

javascriptjqueryregex

How to use jQuery to iterate through a C# serialized List<string>

I am working on a webmethod that reads the first line of a CSV file to extract the column titles and then stores each item in a list to be returned to an ajax call. Below is the code snippet for this functionality: [WebMethod] public static string getAvai ...

c#jqueryasp.netajaxjson

Fetch information from the Anilist API

I'm currently working on a small Next.js application and I attempted to fetch data from an API (). My goal is to display a collection of Anime covers. In order to achieve this, I had to implement GraphQL. Initially, I wanted to display the names of s ...

javascriptnext.jsgraphqlapolloapollo-client

"Enhance your website with the magic of jQuery magnific-popup

Is there a way to add an additional button to the jquery magnific-popup component that can close the dialog box? I am currently utilizing this component to insert descriptions for photos, so I need a submit button that will successfully add the descriptio ...

javascriptjqueryjquery-uijquery-dialog

Child component destruction triggers an ongoing digestion process

I am facing a strange issue within my AngularJS application. The error I'm encountering is the common $digest already in process error. Despite searching online and reviewing similar questions, none of the proposed solutions have resolved the issue. T ...

javascriptangularjsfrontend

Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...

htmlcsstooltip

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3