Dropdown Menu - Submenu not lining up

[dday9]

I'm re-working my dropdown menu from earlier post and I'm running into the issue where my submenu is not lining up with it's top-level parent. Here is my JSFiddle. What I'm finding is that it's because of this line:

.menubar li {
    display: inline-block;
    padding: 0 15px;
}

Whenever I set the top-level parent's left and right padding to 15 pixels, it throws off the positioning of my submenu. How can I make to it where the submenu's left will be lined up with it's top-level parent's left?

[tr333]

https://jsfiddle.net/j6p1an97/1/

I split the ".menubar li" selector into two, so you can add extra specificity with the child selector on the inline-block. You are already specifying display: block for the submenu li further down the styles so you don't want this previous selector setting it to inline-block. You wouldn't have noticed this since the later more-specific definition (block) overrides the earlier definition (inline-block).

As for the padding issue, I've added a negative margin-left of 15px to the submenu to shift it left by 15px.

EDIT: I couldn't see what you are using to display the caret symbol. I would suggest something like Font Awesome; specifically caret-down or angle-down.

[dday9]

Alright, thank you so much.

PS - Sorry for the late reply.

[tr333]