What is the best way to access dropdown sub-menu options from a complex multi-level navigation bar

Struggling to figure out how to open my dropdown sub-menu using CSS. Hoping to make it so the user can open it by hovering over the corresponding tag. I attempted to use #lablinksDD to trigger the opening of #ddSbMenu when hovered over #menuDD with #labLinksDD:hover #ddSbMenu. What am I missing here?

Code:

HTML

<ul>
    <li><a href="DD/Index.html" class="tpNavBtns">Digital Design (DD) ▾</a></li> <!--▴-->

    <ul class="subMenu1" id="menuDD">
        <li><a href="#" id="labLinksDD">Labs ▸</a></li> <!--◂-->

            <ul class="drpDn-subMenu labSbMenu" id="ddSbMenu">
                <li><a href="DD/Labs/Lab_01/LB1_WeiJianZhen_DD.html">DD Lab 1</a></li>
                <li><a href="DD/Labs/Lab_02/LB2_WeiJianZhen_DD.html">DD Lab 2</a></li>
                <li><a href="DD/Labs/Lab_03/Lab_3.html">DD Lab 3</a></li>
                <!--more than 20 a tags inside lists-->
            </ul>

CSS


.drpDn-subMenu {
    display: none;
    position: absolute;
    width: 200px;
    height: 500px;
    top: 0px;
    left: 164px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: red;
    list-style-type: none;
    border-left: 1px solid rgba(120, 120, 120, 0.70);
    border-bottom: 1px solid rgba(120, 120, 120, 0.70);
}

.drpDn-subMenu a {
    display: inline-block;
    position: relative;
    padding: 20px 50px;
    width: 100%;
    height: auto;
    text-align: left;
}

#menuDD {
    top: 100%;
    left: 13.6%;
}

#menuWCP {
    top: 50px;
    left: 800px;
}

.labSbMenu {
    z-index: 3;
}

.prSbMenu {
    top: 56px;
    height: auto;
    background-color: antiquewhite;
}

If you have an alternative Vanilla JavaScript solution rather than a CSS one, feel free to share!

javascripthtmlcss

Answer №1

Perhaps this solution may not fully meet your needs, but consider implementing a JavaScript function:

<li><a href="#" id="labLinksDD" onclick="displayLabLinks()">View Labs »</a></li>


<script>
        function displayLabLinks() {
        document.getElementById("ddSbMenu").style.display = "block";
        }
</script>

Answer №2

To resolve this issue without using JavaScript, you can modify the id of the anchor to the list item or apply a different id or class to the list item. This can be achieved by utilizing CSS general sibling selector (~) or adjacent sibling selector (+). For more information, refer to https://www.w3schools.com/css/css_combinators.asp:

#labLinksDD:hover~#ddSbMenu {
    display: block;
}

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 concept of hoisting in JavaScript for global variables and functions

I've been curious about hoisting. I understand that if a global function shares the same name as a global variable, the function will overwrite the variable's name. Is this correct? Here is an example code snippet. (function() { console.log ...

javascripthoisting

Error in jQuery sortable function occurs when dragging multiple elements

When using the sortable() function on multiple lists, I encountered a persistent bug. To drag more than one item, I added the following code to the start function: e.item.siblings(".selected").appendTo(e.item); However, a new issue arose where the plac ...

javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-droppable

Updating a component (`AddBudgetModal`) while rendering a different component (`App`) is not possible. To identify the incorrect setState() call within the `AddBudgetModal` component

Here is the code snippet from App.jsx I'm facing an issue on line 44 where I'm attempting to open an addbudgetmodal by passing true or false. However, I'm getting an error message that says "Cannot update a component (App) while rendering a ...

javascriptreactjsreduxstatesetstate

Using plain JavaScript, adding an element to an array by pushing the value of a string variable in an index position rather than pushing the

I have the following JavaScript code snippet: let array = []; const datas = [ 'name1', 'name2', 'name3', ]; async function getData() { datas.forEach((data) => { let myData = data.name; if(!array.include ...

javascriptarrays

Troubleshooting problems in transferring JSON data between a React application and a Spring Boot service running locally

Running a local Springboot server, accessing it locally in the browser returns a properly formatted JSON object. However, encountering issues when trying to fetch this JSON object from a React application running on node locally. Managed to overcome CORs h ...

javascriptjsonreactjsgoogle-chrome

Utilizing functions as parameters and implementing a flexible number of arguments

I have two different functions: Function called 'first' which takes 1 argument Another function called 'second' that takes 2 arguments Next, there is a third function that accepts a function and a value as its parameters. I am strugg ...

javascriptfunctionarguments

Is there a way to identify the moment when a dynamically added element has finished loading?

Edit: I've included Handlebar template loading in my code now. I've been attempting to identify when an element that has been dynamically added (from a handlebars template) finishes loading, but unfortunately, the event doesn't seem to trig ...

javascriptjquery

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

I keep encountering an undefined value when trying to assign the subscribed value to a variable in my code snippet below. service.ts getIpAddress() : Observable<any> { return this.http .get(this.Geo_Api) .map((response: ...

javascriptangulartypescriptangular5

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

javascriptjquerycssgoogle-chromejquery-isotope

What is the process for determining the total of elements within an array?

Imagine you have the following array: const items = [ { "amount1": "100", "amount2": "50", "name": "ruud" }, { "amount1": "40", "amount2": "60", "name": "ted" } ] Your goal is to calculate the sum of all amount1 and amount ...

javascriptarrays

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

displaying a PDF file in Safari

Is there a way to display a PDF document within an HTML page without encountering a missing plugin error? I attempted to use the following code, but the error persists. Interestingly, if I drag the same PDF file directly into my browser, it displays perfe ...

javascriptmacospdfsafari

Unable to reset the input value to an empty string

I have created a table with a search bar feature that filters the data when the search button is clicked and resets the filter to show unfiltered data when the clear button is clicked. However, the current input value is not clearing from the display even ...

javascriptreactjsmaterial-uijsx

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Currently, I am dealing with some HTML/CSS aspects of an already established WordPress website. It appears that there might be an issue related to the theme's CSS causing this problem, although it is not immediately apparent. Specifically, there is s ...

htmlcss

Issue with Jquery UI sortables not functioning properly

Struggling with getting a sortable list to work using jQuery UI. The ul element is receiving the class 'ui-sortable' but nothing seems to be happening. To demonstrate this issue, I created an example since the original javascript code is quite c ...

javascriptjqueryjquery-uijquery-ui-sortable

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Disregard the views folder when using Express

I've configured a settings file to store important information like the application path and cookie secret for my express app. However, I'm facing an issue where it seems to be disregarding my specified view path directory. config.js: ... expor ...

javascriptnode.jsexpress