Dropdown submenu display issue with multiple selections

I've been working on a multi-level dropdown menu. It seems like there's a dropdown menu inside another dropdown menu. However, when I click on the inner dropdown menu, it doesn't open to the right as expected; instead, it opens below the menu. I'd like the inner dropdown menu to show up on the right side, creating a staircase effect. How can I fix this problem?

Here is an excerpt of my code:

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine
      <b class="caret"></b>
   </a>
   <ul class="dropdown-menu">
       <li class="dropdown-submenu">
         <li><a href="../Home/Emag">Valarum Vinnarasu</a></li>
         <li><a href="#">The Throne</a></li>
       </li>
   </ul>
</li>
<li><a href="../Home/childrenhome">Children Home</a></li>
</ul>
</li>
htmlcssdrop-down-menutwitter-bootstrap-3

Answer №1

Your code seems to have some tag errors that could be causing issues. Please share your CSS so we can help you troubleshoot the dropdown functionality.

<ul>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <ul>
          <li><a href="../Home/Emag">Valarum Vinnarasu</a></li>
          <li><a href="#">The Throne</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="../Home/childrenhome">Children Home</a></li>
</ul>

Answer №2

If you want to achieve this, JavaScript is the way to go.

Check out this snippet of JavaScript code:

function showNested(caller) {
    var elem = caller;
    var child = $(":first-child", elem);
    if (child.is(":visible"))
       child.hide();
    else
       child.show();
}

Here's an example with HTML:

<ul>
   <li>List item one</li>
   <li><a href="#" id="elemId1" onclick="showNested(this);">List item two with subitems:
      <ul id="innerList" style="display: none">
         <li>Subitem 1</li>
         <li>Subitem 2</li>
      </ul>
   </a></li>
   <li>Final list item</li>
</ul>

Explanation: This function responds to the onclick event. When you click on an element, the showNested function is triggered with the element as its argument. It then finds the first child element (inner list) of the caller and toggles its visibility. You can use this function for multiple nested lists. You may also utilize the onmouseover event.

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

ngClass causing styling issue when applying styles

When I use class names like error and info, the CSS works fine. For example, in this Angular app (latest version) here: https://stackblitz.com/edit/github-i4uqtt-zrz3jb. However, when I try to rename the CSS classes and add more styles, like in the examp ...

cssangularjstypescript

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Tips for placing a large image within a small div

I have an image with a ratio of 1920*1300 that I want to be displayed on any device the website is viewed and cover the entire div. Check out my code below: .carousel { width: 100vw; height: 80vh; position: relative; } .carousel a { width: 1 ...

htmlcssimage

Aligning the Bootstrap navbar to the right causes the items to shift to the left

UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...

htmlcssalignmentnavbartwitter-bootstrap-4

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

javascripthtmleclipse

Is there a way for my extension to prevent a rickroll from starting before the video even begins?

I'm working on creating a Chrome extension that prevents rick rolls. Here's an overview of my manifest.json file: { "name": "AntiRick", "version": "1.0", "description": "Introduci ...

javascripthtmlgoogle-chrome-extension

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

htmlcssangularangular-material2

What is the approach taken by NextJS for ensuring the security of pages when attempting to access them directly in the browser

What happens in NextJS when an unauthorized user tries to access secure pages directly in the browser? Currently, I am attempting to view the /dashboard (which is a secure page). The dashboard DOM elements are displaying. Please refer to the screenshot be ...

htmlreactjssecuritydomnext.js

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...

cssreactjssassmaterial-ui

JQuery functions for click and hover are not functioning as expected on a div element

I am having trouble with a div that I have declared. The click event is not working as expected, and I also need to use the :hover event in the css, but it isn't functioning either. What could be causing this issue? <div id="info-button" class="in ...

jqueryhtmlcss

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

Ways to subtly adjust the edges of text in a design

https://i.stack.imgur.com/sr4PF.pngIs there a way to adjust the border of text that already has a border applied? I have successfully created the text with the border using the following CSS: h1 { font-size: 35pt; text-align: center; font-family: ...

csstext

react dealing with clicking and blurring at the same time

Is there a way to ensure an input's onBlur event fires only after a button's onClick event is completed? The challenge is that the function relying on the state change caused by the onClick needs to be executed by the onBlur event. Using setTimeo ...

javascripthtmlreactjs

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

Having trouble locating the bootstrap import statement

Currently, I am working on a project in Angular where I have defined two styles in the angular.json file - styles.css and node_modules/bootstrap/dist/css/bootstrap.min.css. After running ng serve, it shows that it compiled successfully. However, upon ins ...

javascriptangulartypescripttwitter-bootstrap-3

Having trouble getting background image transitions to work properly in CSS?

I'm encountering an issue with setting the transition CSS property for a hover effect, as it doesn't seem to be working correctly. Here is the relevant HTML: <div class = "menuItemBox" id = "Mughlai"> <p class = ...

htmlcsscss-transitions

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

htmlcsstwitter-bootstrapresponsive-designless

Positioning two social media share plugins (Facebook and Twitter) side by side on a single line (vertically aligning them

Having implemented Twitter and Facebook share plugins on my site, showcased in this example, I'm facing the challenge of aligning the buttons vertically. Despite attempting to adjust margin-top and padding-top attributes, the alignment issue persists. ...

htmlcss

Validation is only effective for the initial row and fails to apply to subsequent rows. This may be due to the necessity of including the return true/false statement in my validation process

HTML PHP <div align="center"><input type="text" class="form-control" id="<?php echo $i;?>" name="r2<?php echo $i+1;?>" onblur="mvalidate2()" style="text-align: center; bo ...

javascriptphphtmlarraysvalidation

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Consider this menu structure: <ul class="main-menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> My task is to dynamically hide th ...

javascriptjqueryhtmlcss