Hi everyone! So…i have this drop down menu and i want to make a multi-level drop on some links.
For exemple, at Produse Informative CIMIC → Estimare Cimic i want to show another menu with 2 links from Estimare Cimic called Studii judete and Studii mari.
To add another level is more or less the same as you have done for the first level except that for the second level you show the dropdown to the right of the trigger rather than underneath.
Usually with dropdowns like this you would use nested lists as that is more semantic than using a nested div and also easier to target without using multiple classes. You can target the first level only using the child selector (>) and avoid triggering nested levels by accident.
Another point for accessibility is that hiding with display:none is not very accessible for screen readers (and some search engines) so you are better moving the menu off screen and then bring it back on screen when needed. This means that the links are always available to screen readers and search engines etc. It also has the added benefit that you can then add a little transition effect if you want because you can’t animate from display:none.
Also be careful with styling elements directly like li a {} etc. It is highly unlikely that you want all lists throughout your site styled as dropdowns so vene when making demos use a class to base the styles on. e.g. .menu li a{}
Have a look at a basic multiple drop down that I have set up from another similar thread that has all those points in mind.
You should be able to use that to modify your own code quite easily. If you get stuck then post what you have tried and I will offer more specific advice.
Bear in mind that dropdowns are not very mobile/touch friendly or easily accessed by those with motor disabilities.
I’ve just duplicated the menu items twice for testing but you would need to follow the same format for all the items as required. I’ve also left your classes in place but a lot are really redundant in that structure.