jQuery .show doesn't display the background

Question

I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.

for some reason I have to accompany links to jsfiddle.net with code, so here it is.

Answer 1

You missed setting the color for the the #parnavdrop ul li .
JSFiddle

#parnavdrop ul li {
  background-color: #41D4CF;
}

Answer 2

Actually the issue is you have mentioned background-color to inherit.

.nav ul #navdrop #subnavdrop{
   background-color:inherit;
}

So it is inheriting background color from its parent which is causing the issue.

So the following code change can also resolve the issue.

.nav ul #navdrop #subnavdrop{
    background-color:#41D4CF;
}

Sometimes just because of these stop() functions JS functionality is not working properly