Link to pen with problem: http://codepen.io/kostanakis/pen/MepJYq

In the current code, a drop-down menu appears over the main menu bar. It comes to mind to use z-index, but this parameter does not work with position: absolute. If you set the position:relative; then it gets worse. How to be?

UPD: The nuance is that if you shift the block of the drop-down menu below, then when you move the cursor to this block it disappears: hover, the menu is hidden.

1 answer 1

Try changing the indent from the top for the nested one and set for example 15px in the CSS line 55-56.

 .nav ul { margin: 15px 0 0 -30%; padding: 5px 0 0 1em; }

And to make the entire list look even more neat, you can correct the margin and paddding for <ul> and <li> .

And try to use either "px" or "em" for the task, otherwise you use both of them directly on the same line.