What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden.

For example, when navigating to the "Resources" section, the submenu only displays under the "Resources For" tab and not under the other tabs like "Basic Rights", "Health", or "For Educators". Similarly, submenus are missing from tabs such as "Scholarship" under the main tab "Program". I'm struggling to understand why these submenus are not appearing correctly. Any assistance would be greatly appreciated.

You can view a live example here.

Here is the HTML code:


        <!-- Sticky Navigation -->
<div class="nav-wrapper">
            <ul>
                <li>
                    <a href="#">ABOUT US</a>
                    <ul>
                        <li><a href="story.html">OUR HER-STORY</a></li>
                                <ul class ="submenu">
                                    <li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
                                    ...
                                </ul>
                ...

And here is the CSS styling:


/* Navigation Bar */
/* Styles color and interaction, as well as continuous position on scroll. */
.nav {
    ...
}
...
htmlcsssubmenu

Answer №1

It's because they are all improperly wrapped (just in different ways

<li><a href="./resources/index.html">RESOURCES FOR</a> <!-- no closing li like the others-->
  <ul class ="submenu">
      <li></li>
 </ul>
 <!-- which means that the submenu^^ is still inside it -->
<li><a href="rights.html">BASIC RIGHTS</a></li> <!-- closing li -->
  <ul class ="submenu">
      <li></li>
  </ul>
  <!-- this submenu^^ is not in the li, which means that none of the CSS applies since it is not 'li ul.submenu'. It is only 'ul.submenu' -->

To resolve this issue, it is recommended to wrap ul.submenu in the li tags.

<li><a href="rights.html">BASIC RIGHTS</a>
  <ul class ="submenu">
      <li></li>
  </ul>
</li><!-- closing li down here-->

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

Creating a layout with 2 rows and 5 columns in Bootstrap 5 may not perfectly fit a 100% width and 100% height

Can someone assist in adjusting this Bootstrap 5 code to perfectly fill the entire screen of all 16:9 devices (mobile and desktop/1080p/2160p using Chrome browser) with 100% width and height? The goal is to eliminate horizontal and vertical scrolling. Desp ...

htmlcsstwitter-bootstrapresponsivebootstrap-5

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Is there a way to capture the value of a JavaScript variable and store it in a Python variable? I have a Python-CGI script that generates a selection box where the user can choose an option from a list. I want to then take this selected value and save it ...

javascriptpythonhtmlcgi

The HTML2Pdf content is spilling over the edge of the page

I am attempting to create a PDF from an HTML File using the HTML2PDF library. Here is my HTML code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"> <table width="968" ...

phphtmlcsshtml2pdf

Variables in an Angular application are not appearing in the HTML rendering

Currently learning AngularJS as I develop a web application. After going through tutorials, I started with a basic list but am baffled as to why my browser only shows {{title}}. In my app.js module, here's the snippet where I defined the controller: ...

javascripthtmldata-bindingangularjs

Define the total in a CSS attribute

I am working with multiple divs that have a specific CSS class applied to them. My goal is to manually increase the pixel value in the top property: .class { top: 100px; } div class="class" style="top:+=50px" Is it possible to achieve this functiona ...

css

Implementing initial state checks for Alpine.js checkboxes based on x-modal is not functioning properly

Upon loading alpinejs, for some reason all checkboxes become unchecked. It's perplexing and I can't figure out why. <div x-data="{ colors: [orange] }"> <input type="checkbox" value="red" x-model="co ...

javascripthtmlarraysformsalpine.js

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

What is the method for stretching the navbar and content to fill the entire viewport in Bootstrap?

Can anyone help me with an issue regarding a navigation bar and content created in Bootstrap 5? I'm trying to use vh-100 to make both the navigation bar and content stay on the view page without a scrollbar. However, the size of the navigation bar is ...

htmlcsstwitter-bootstrapbootstrap-5

Implementing custom styles in JavaScript according to the specific browser or platform

When it comes to adding multiple css styles to a dom element and ensuring compatibility across different browsers, which approach is more optimal for performance? Combining all prefixed css properties together, allowing the browser to decide which one ...

javascripthtmlcsscross-browser

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

javascriptjqueryhtmlasp.netasp.net-mvc

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

Having trouble retrieving the input value using JavaScript

I have been attempting to retrieve the value of an input tag using JavaScript and display it on the console, but my code seems to be not functioning properly. Can someone help me identify the issue in the following code snippet? const userTextValue = doc ...

javascripthtmldom

CSS: the max-width property does not constrain an absolute positioned container from overflowing

I've been trying to figure this out for hours, but I can't seem to get it right. My top menu has submenus that include a popup menu. In one of my popups, I need the container to have a maximum width of 170 pixels and all the items inside to wra ...

htmlcss

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

htmlcss

Web application using HTML5, AJAX, and a manifest file for offline usage

Looking for help with an issue on my website: Currently trying to put it offline. Using the manifest file: Encountering an issue with the left and right arrow navigation while offline. The browser shows an xmlhttprequest error, similar to the one found ...

jqueryxmlajaxhtmlmanifest

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

javascriptjqueryhtmlcss

Having an issue with retrieving value from a textfield in JavaScript

<input id="checkOldPassword" type="button" title="Check New Password" value="Check New Password" onclick="checkPassword()" /> <input id="newPassword" type="text" maxlength="8" min="8" /> <script language="javascript"> function checkPassw ...

javascripthtmltextfield

Obtaining data from a hyperlink's attribute within HTML

I have a question that builds upon my previous inquiry: Finding the text of an href tag from an HTML file My current query involves extracting the number within seekVideo(number). For instance: <a href="#" class="transcriptLink" onclick="seekVideo(200 ...

iphonehtmlxml

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

javascripthtmlcss