creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu.

I have attempted to modify someone else's code but it is not working as desired

CSS code (OurSite.css)

ul#third-level-menu
{
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

ul#third-level-menu > li
{
  height: 30px;
  background: #999999;
}

ul#third-level-menu > li:hover { background: #CCCCCC; }

ul#second-level-menu
{
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

ul#second-level-menu > li
{
  position: relative;
  height: 30px;
  background: #999999;
}
ul#second-level-menu > li:hover { background: #CCCCCC; }

ul#top-level-menu
{
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#top-level-menu > li
{
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
ul#top-level-menu > li:hover { background: #CCCCCC; }

ul#top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}


/* Menu Link Styles */

ul#top-level-menu a /* Apply to all links inside the multi-level menu */
{
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;

/* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}

ul#top-level-menu a:hover { color: #000000; }

I also have js code (Menu-Script.js)

document.getElementById("nav01").innerHTML =
"<ul id='top-level-menu'>" +
"<li><a href='index.html'>Home</a></li>" +

"<ul id='second-level-menu'>" +
"<li><a href='index12.html'>Home12</a></li>" +


 "<ul id='third-level-menu'>" +
 "<li><a href='index123.html'>Home123</a></li>" +
 "<li><a href='index124.html'>Home124</a></li>" +
 "</ul>" +

 "<li><a href='index13.html'>Home13</a></li>" +

 "</ul>"  +

"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>"; 

For HTML Code

<!DOCTYPE html>

<html>
 <head>
  <title>Demo</title>
  <link href="OurSite.css" rel="stylesheet">
 </head>
 <body>
  <nav id="nav01"></nav>
  <div id="main">
    <h1>Welcome to Our Site</h1>
    <h2>Web Site Main Ingredients:</h2>

    <p>Pages (HTML)</p>
    <p>Style (CSS)</p>
    <p>Code (JavaScript)</p>
  </div>
  <script src="Menu-Script.js"></script>
 </body>
</html>

If you have any improved code suggestions, please share them with me. Thank you!

Answer №1

Your code may not be perfect, but it seems like you only need to make changes to the HTML within JavaScript:

document.getElementById("nav01").innerHTML =
"<ul id='top-level-menu'>" +
"<li><a href='index.html'>Home</a>" + // no closing li tag here

"<ul id='second-level-menu'>" +
"<li><a href='index12.html'>Home12</a>" + // no closing li tag here


 "<ul id='third-level-menu'>" +
 "<li><a href='index123.html'>Home123</a></li>" +
 "<li><a href='index124.html'>Home124</a></li>" +
 "</ul></li>" + // closing li tag here

 "<li><a href='index13.html'>Home13</a></li>" +

 "</ul></li>"  + // closing li tag here

"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>"; 

Please ensure that the <ul> tags are properly nested inside their parent <li> tags.

[ul] 
 -> li 
    [ul]
     -> li 
        [ul] 
         -> li
         -> li
 -> li
 -> li

For a visual example, you can refer to this link

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

Tips on Extracting Data from a JSON Object with an Embedded Array

Check out this example of a Json Object: {"UserName":Mike,"IsActive":0,"ChbxIsActive":false,"MyAccountsAvailable":[{"Id":"157A","MyAccount":"CHRIS MCEL","MyCheckBox":false,"Tags":null},{"Id":"157B","MyAccount":"DAN BONE","MyCheckBox":false,"Tags":null} He ...

Neglect the styling of the element wrapper

Imagine I have two divs set up like so: <div name="parent" style="color:blue;padding:5px"> <div name="child" style="background:red"> Text that disregards the color:blue and padding:5px properties, yet still follows the background:red set ...

A guide to obtaining radar chart coordinates by utilizing the getValueForDistanceFromCenter method in Chart.js

I've been experimenting with creating radar charts using Chart.js. I have a good grasp on the basics, as shown in the simple chart below, but I'm looking to utilize the x y coordinates of the graph to position text directly on the canvas. After ...

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

How can I calculate the total sum of values in an array retrieved from an API call?

Within the array this.state.companiesIncome, I've got 50 objects each containing a {value and date}. However, when attempting to retrieve this.state.companiesIncome[2].value, I'm encountering an error stating: TypeError: Cannot read property &apo ...

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

Error message 'MODULE_NOT_FOUND' occurs while executing a Docker application

Although I successfully created a docker image, I am encountering issues when trying to run it. This is the command that I am using for running: docker run coderpc/test-server Displayed below is the error message that appears in the console. Error: Canno ...

Adjust slider value dynamically with jQuery

I am working on a UI slider that ranges from 0 million to 20000 million. My goal is to change the displayed value when it reaches 1000 to show '1 milliard', and at 20000 to show '20 milliard'. For instance, if the value is 1100 millio ...

What's the best way to expand the right side of .li following a left offset of -20px

My nested list structure looks like this... https://i.sstatic.net/sggVx.png What you see is a recursive ul/li setup... <div class="family d-block"> <span class="pb-2"> <small class="text-muted">Family:</small><br> < ...

The implementation of Ajax beforeSend and complete functions is not possible at the moment

I’ve been attempting to implement a spinner image while loading ajax data, but I can't seem to get it to work. Here's my code : $.ajax({ url: '/Observer/GetInfoProfileByProfileId', type: 'POST', data: { ProfileId: ...

Unable to select a div element with a specific attribute using nth-child in CSS

I have encountered some outdated legacy blog code and am currently attempting to isolate the first div element with the attribute of "text-align: left". Below is a simplified example of the code snippet I am dealing with: <div class="et_pb_module e ...

Error: JSON data couldn't be processed due to an unexpected end, resulting in a SyntaxError at JSON.parse()

I'm currently working on making an ajax call to an API, but I keep encountering an error whenever I try to make the call. I've been troubleshooting this for hours and I can't seem to figure out what the issue is. At one point, I even removed ...

Issue with Angular ng-model not functioning as expected within ng-repeat block

Encountering an issue when trying to bind Json data into ng-model within ng-repeat. html : <div ng-controller="Ctrl"> <div> <table> <th> <td>add</td> <td>ed ...

Embed a function within a string literal and pass it to another component

Is there a way to pass a function defined in actions to an element? Reducer case 'UPDATE_HEADER': return Object.assign({}, state, { headerChildren: state.headerChildren.concat([action.child]) }); Action.js export const deleteH ...

Trouble with displaying a custom marker on Google Maps API v3

I have been struggling to replace the default marker with a custom icon in my Google Maps code. Despite my efforts and thorough research, I cannot seem to get it to work correctly. Below is the snippet of my code: <script type="text/javascript"> fu ...

Can I use jqPlot to create a separate division for the legend?

Is it feasible to move the legend to a distinct div using jqPlot? legend: { show: true, placement: 'outside', fontSize: '11px', location: 'n' } ...

Discover the method for displaying a user's "last seen at" timestamp by utilizing the seconds provided by the server

I'm looking to implement a feature that displays when a user was last seen online, similar to how WhatsApp does it. I am using XMPP and Angular for this project. After making an XMPP request, I received the user's last seen time in seconds. Now, ...

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

Discovering ways to optimize argument type declarations in TypeScript

If we consider having code structured like this: function updateById( collection: Record<string, any>[], id: number, patch: Record<string, any> ): any[] { return collection.map(item => { if (item.id === id) { return { ...