Here is did a little bit to fix that. For the margin top, use the height of the menu items. In this case, 50px. Also, use a ">" to force it to be the next ul to display when hovering instead of all upcoming ul. Thanks @Watson90 . I just built off of what you did.
I can't get my drop down menu to display properly when it is hovered. I used the following code:
ul.nav li ul { display: none; position: absolute; z-index: 9999; background: #3c3c3b; white-space: nowrap;
}
ul.nav li ul a{ display: block; }
View the full code here: http://www.lwebdesigns.net/designs/newsroom/newsroom.html
I think it should just be
.nav ul { display: none; }
.nav ul:hover li { display: block; position: absolute; }
Make sure your navigation is set to position: relative;
That didn't work :(
I've just coded this up for you, this is kind of what you're after I think.
http://codepen.io/Watson90/pen/ekmKv
That works great! Now how do I get it to work with the sub menu items? They automatically display.
Do you mean a drop down of the drop down menu?
Yes!
Here is did a little bit to fix that. For the margin top, use the height of the menu items. In this case, 50px. Also, use a ">" to force it to be the next ul to display when hovering instead of all upcoming ul. Thanks @Watson90 . I just built off of what you did.
http://codepen.io/joe/pen/qsgrB
Nice work @kevin11189