Hello lovely people,
I completed the (New) Responsive Web Design course and I am trying to modify some of the code to try and do something different.
What I am trying to do now specifically is to create a dropdown menu on mouse hover. I found a “solution” as usual on w3schools, which does work but doesn’t come with an explanation on what each line is doing and I am confused.
This is how they do the styling:
ul { display: inline; margin: 0; padding: 0; }
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul { position: absolute; width: 200px; display: none; }
ul li ul li { background: #555; display: block; }
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
My main confusion are the selectors. I followed quite fine until ul li:hover (which is not that far tbh), but from ul li:hover ul on I don’t really have any clue of what is going on.
If anyone can give any time to this that would be very much appreciated!
Give us your best guess. What do you think this is targeting?
Thank you, now I hate myself 'cause I could have figured it out by myself if I had given it a little bit more thought! 
I guess it is targeting the ul that appears when you hover on the li?
So next is:
the ul that is under the li of the first ul,
and after is li(s) of the ul that is under the li of the first ul,
and the links of the li(s) of the ul that is under the li of the first ul,
and last is the style when you hover over the li(s) of the ul that is under the li of the first ul.
My next question is why it is giving the !important value to ul li ul li a? Doesn’t the selector already overwrite any other more general a styling?
I think you got it!
I don’t know for sure. Usually you use !important when some other CSS is interfering with what you are trying to do. But if that isn’t the case then the !important probably isn’t needed (although it’s probably not hurting anything here). I would need to see the entire example to give a better answer. Do you have a link to this?
1 Like
Yes, its’s here dropdown menu .
The menu worked just fine when I removed the !important. Like I said, not hurting anything, just not needed (at least for this very simple example).
Great! Thank you very much for your help!