How to make a dropdown?

Question

css

I just can't get the code right and do it right. There are two problems:

1) The :hover property doesn't work correctly when you move the mouse over the edge of the element (background) the text doesn't change colors, it only changes if the mouse is clearly hovered over the text. This applies to both navbar and dropdown elements.
2) It is not possible to make a dropdown. Gets in the wrong place and takes the colors of the navbar elements. If then he just adds other colors separately, will it be ok? Or is this not best practice?

My code:
https://jsfiddle.net/L9r7d562/3/

Here is the original of how I want to do it:
https://codepen.io/sathishlxg/pen/JoLOYR?editors=1100

Answer 1