Why wont my drop down menu work?

https://code.sololearn.com/WGwrz3txPrVX/#html

18th May 2020, 6:33 PM

Garvin112211

3 Answers

+ 1

i'm no expert.but i found this code hope this helps https://code.sololearn.com/WV5yAMqEKnO0/#css i'm happy to help the community

19th May 2020, 6:19 AM

Dilip Adithya

( 1 / 2 ) You should indent your code to better figure what is child of what, and what is sibling of what: mainly, your ".sub-menu-1" class isn't targeted by your css selectors (except for the 1st rule to default hide them ^^)... Explanation and fix for the first one (others are similar) without changing the actual html structure (wich would be advised to handle differently ;P): .menu-bar ul li:hover .sub-menu-1 { will target ".sub-menu-1" class elements wich are descendant (child or child of child of...) of <li> (when hovered), but your html structure has the first one being next sibling of the second one (or even child of next sibling <h3>, in 2nd submenu -- related to "services" main menu item)... for correctly targeting it, you must use the plus "+" next-sibling selector operator (and add the h3 element selector to correctly handle 2nd submenu): .menu-bar ul li:hover + .sub-menu-1, .menu-bar ul li:hover + h3 .sub-menu-1{ The comma "," separator allows to use more than once selector for a group of css property definitions... Fixed + improved css (see next post for some of actual flaws) css: https://code.sololearn.com/WXOVGz5zUrSG (posts added as content)

19th May 2020, 6:48 PM

visph

( 2 / 2 ) However, there's quite a lot of flaws, both in your css and your html... For css: 1. the selector ".menu-bar fa" doesn't target anything ("fa" is not a valid nor a custom element used in your html) 2. the selector "h3.serif" also doesn't target anything (".serif" class doesn't appear anywhere in your html) 3. for the "h3.serif" css rules (not applied to anything actually) you set the "font-family" css property to serif, but you doesn't set explicitly set "font-family" to anything else (and all browsers doesn't default to same font-family -- some user-agents uses "serif", others use "sans-serif') 4. your absolute sizing (using "px' unit) makes your design require at least 1440px wide viewport (without taking account of unexpected spaces due to new lines and spaces in html source code), but without explicitly defining it for <body> or <div class="menu-bar">, there are scrollbar introduced for viewport width lesser than this requirement (and part of your main menu bar becomes invisible due to white letters color on white background color, because overlow content doesn't have the blue background color defined for the menu bar -- inspect the improved css given in previous post to see how I suggest to handle it with relative units and adapt the sizing regarding of available width)... For html: 1. using same structure for all your submenu would be more easy to handle (only once selector for all) 2. having your submenu structure as child of <li> related items would help (hovering submenu will let parent hovered, else submenu is no more hovered when trying to hover/click items in submenu)... Anyway, I don't know what exactly you're trying to achieve (".sub-menu-2" class isn't still / yet implemented and nested submenu would be tricky to do if you're not comfortable with submenu 1st level ;P), so I cannot help more without doing all the work for you... so keep practicing, and explore / learn ressources available on web, such as https://developer.mozilla.org/en-US/docs/Web :) !

19th May 2020, 6:48 PM

visph