I can’t seem to figure out what the key to making a dropdown menu is. I always have trouble with the dropdown size of the menu. Should I put a width or can I get it to auto size according to the text? how do I line up the dropdown under the appropriate menu item? Please check out what I have so far and offer any fixes. I have been working on this for an hour
for the sake of the design, I need the line-height: 100px and the vertical-align: middle. I found that for me, this is the best method to align the menu directly in the middle. When I change it to what you said, it puts the nav at the top of the container and that won’t work. the display: inline-block however did fix the positioning of the menu and perhaps the word wrapping. I will have to add some styles to sub menu to fix it up but it seems to be working. I am not sure why display: inline-block fixed it but it did. Thanks for the examples. I am going to keep them in snippets to study for next time.
the black represents my background on my site. So the dropdown will begin just under the black background as it does in the example. So, as you can see. The line-height:100px and the vertical-align: middle; is used to vertically center the navigation.