I am trying to create a dropdown menu in a navbar so that when I hover on the menu in the navbar for tablets and mobile phones it drops down. I hope to achieve this with pure html and css. I seem to be doing something wrong in my code which is making it not to work. Please help me check it . Here is the link to what I have done so far.
You have to remove the statement: overflow: hidden;
from #navbar or change to another option. Currently, it’s hidding any overflow for your drop-down menu. I suggest you play around with background-color if you are wondering what class or id affects your layout. It helped me see that your code was correct for the drop-down itself. Then you can work backwards and see if the issue is with a parent or sibling element. You can also read up on overflow, here: https://www.w3schools.com/cssref/pr_pos_overflow.asp
I like your website and color scheme.
@ebruin22 Thank you for reaching out.
It works now on the laptop view but when I reduce the screen size to tablet view and phone view, it doesn’t dropdown. The smaller screen views are the reason I created it. I have added display block to the dropdown class on the media queries but its still not working. Please help me check again.
And thank you for liking my work.
I think you’ll need to use media queries to change the CSS for mobile, tablet, and computer views. You can use media (max-width: 100px) { /* CSS Rules */ } and then adjust to the smaller mobile screen. I don’t see your menu button anymore on your snippet so I can’t check the issue.
1 Like
The selector #navbar a will select both the normal and mobile nav links. The selector .dropdown-content a is lower in specificity so its style rule for display will not work (gets overwritten).
You can give the links separate classes and use them for the selectors. Or you can scope the selectors by giving the links separate containers, which is not a bad idea anyway to get more semantic HTML. I’d suggest you use a header element for the main container and two nav elements for the link containers. You should also position the dropdown menu relative to its container and adjust offsets as needed.
Last. I would recommend using flexbox instead of float.
Also, just as an aside, when using float you have to make sure you maintain the element’s order so your elements do not switch position. For example, your nav links are in the wrong order. The home link should come first not last.
Thank you @ebruin22 It works well now.
Thank you @lasjorg I tried using flexbox on the a links but it got overflown outside of the nav container. Using the overflow values didn’t help much either so I used float but checked the order of the elements as you suggested by giving them a div and floating it left while floating the a links right and it worked like magic!
Giving the navlinks and the dropdown links separate classes helped me target them properly too.
Thank you for your input.