Need help! - Dropdown menu collapsing as I move downward,


#1

I am new to HTML/css.
I created dropdown menu like below in HTML. It expands fine.but after expansion to level menu2.2.2.2, if I try to select menu2.3 the whole menu collapses. I want to understand mistake in my css file.

Top bar Menu like
Menu1 Menu2 Menu3 Menu4

Menu2 has Submenus and sub-sub menus as below
Menu2.1
menu2.2
menu2.2.1
menu2.2.2
menu2.2.2.1
menu2.2.2.2
menu2.2.3
menu2.3

I created css as below

* {
	margin:0;
	padding:0;
}
#menu {
	margin-top:120px;
	margin-left:0px;
}
#menu ul
{
	margin-left:0px;
}
#menu ul li {
		/* Important Attributes */
		width:150px;
		float:left;	
		
		/* decoration Attributes */
		background-color: #CFDED3;
		text-align:Center;
		margin-left:10px;
		list-style:none;
		line-height:25px;
		border-radius:15px;
}
#menu ul ul {
	margin-left:0px;
}
#menu ul li:hover { background: #06F;}
#menu ul li:hover > ul{ display: block;}
#menu ul ul {
	margin-left:10px;
	margin-top:0px;
	display:none;
}

#2

CSS on its own does nothing so we need to see the actual html to which you are applying those rules :slight_smile:

I can make a best guess but the error could be a typo in the html or an incorrect structure in the html rather than anything to do with the CSS.

The css you have posted is not a reliable way to do a dropdown anyway (assuming I have guessed correctly at your html) as the sub menus you are using are effectively still in the flow of the page and will cause content in the page to jump up and down as the menu opens. Usually you would absolutely position the submenus in respect of a parent with position:relative applied and remove the submenus from the flow.

The first sub menu would be displayed beneath the first level trigger item but then on further nesting the sub sub menus would appear to the side (this assumes you have a vertical dropdown setup).

In order for us to assist you more easily we require the full css and html that you are using and a quick explanation of how you expect it to function in a real page with content that follows. Using a fully working example on codepen (or similar) is the quickest way for us to help as we can immediately see what’s wrong and work on fixing it without second guessing.

Here is an example of a dropdown menu I have put up showing some best practices.

With dropdown menus it is best not to use display:none to hide the menus because that may remove them from assistive technologies and search engines. An off-screen hiding approach is much better and easier to animate if needed.

Dropdown menus are inherently inaccessible and difficult to make responsive or accessible on touch devices and require a lot of work and effort to get right even for accomplished coders.


#3

Dear PaulOB
Thanks for your advice !!
Look at https://codepen.io/mapati66/pen/VEXmVz, wherein I have provided HTML and css
Dropdown Menu Trial

As there are around 5 level of nested submenus considering navigation space, I decided not to put each level to the side rather below. Just I got this idea from Flipkart (Home>Home and Furniture>Bedroom Furniture) or Paytm is also using this theme effectively for category dispay in seller hub. Below is image file. (I do not want to argue with you,but thought that I should try with that)

As I am new to HTML, I admit I need to learn many things from experts, for which I am open.

Once again Thank and appreciate your advice.

Regards
MD Patil


#4

That’s a ‘tree menu’ that has a single vertical column (not horizontal) and is activated by clicking on the element (requires JS) and therefore the menu stays open when clicked allowing you still to traverse all menus (even those below the currently opened item).

A tree menu is not suitable as a hover menu because as soon as you hover a menu it opens and that pushes all following menu items further down the page. While that may seem ok the problem occurs in that once you reach the end of that newly open sublist it closes (because it is no longer hovered) and your mouse pointer ends up in no mans land with no menu underneath (or the wrong item underneath) so the whole thing collapses.

It is impossible to make that method work for hover in any usable way. You need to do as I already said and bring the submenu to the side as in my demo which you can see works flawlessly.

Your only option would be to use js and make it a click menu instead of a hover menu and then you can do what you want.

I’m not arguing but just stating ‘what happens’.:slight_smile: It’s not possible to do what you ask because that would mean that once you reach the end of the sublist that you just opened it should just hang there while you reach down to the next item in the list. For your method to work it would mean that every sublist would need to be persistent after activated and that’s just not possible using a simple hover menu.

Hope that explains the problem clearly enough but please ask if you don’t understand. If you have seen a hover menu doing exactly what you want then please post a link in case I have misunderstood your requirements.:slight_smile:


#5

Yes, like PaulOB mentioned, it looks like what you linked to in your codepen works differently than what you showed from the PayTM screenshot.

From looking at your codepen, I’m failing to see where “Menu 2.3” is. Is that within the Agri Storage unordered list? That’s the list that has 5 nested lists. I’m not really seeing where the undesired behavior is. Can you describe where exactly the drop down collapses? Have you considered adding in a timeout for the menu like such:
transition-delay:2s;
Perhaps you can use that in your styles for the top-level <ul>. Just thinking out loud. I don’t see where the issue is.

I just uploaded your code to a test site, and it validated properly.

-ty