-
Feb 19th, 2015, 03:20 PM
#1
Dropdown Menu - Submenu not lining up
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:
Code:
.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?
-
Feb 19th, 2015, 06:45 PM
#2
Re: Dropdown Menu - Submenu not lining up
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.
Last edited by tr333; Feb 19th, 2015 at 06:50 PM.
-
Feb 24th, 2015, 01:34 PM
#3
Re: Dropdown Menu - Submenu not lining up
Alright, thank you so much.
PS - Sorry for the late reply.
-
Feb 24th, 2015, 05:35 PM
#4
Re: Dropdown Menu - Submenu not lining up
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|