CODEWITHSUNDEEP
htmlcss
Grace Sawyer
Grace Sawyer

Reputation: 395

How to Add Padding to Vertical Dropdown without Messing up Dropdown?

I want my vertical drop-down menus' parent tabs to have padding and the children tabs to be in the correct position.

You see, if I don't have any padding around the parent tabs (here), it looks like this: enter image description here

If I have padding around the parent tabs (here), it messes up the entire dropdown and it looks like this:

enter image description here

What I would like the dropdown to do is have BOTH padding around the parent tabs (like the second image) AND the normal dropdown (like the first). How do I prevent this strange padding around the entire dropdown when I add padding around the parent tabs? Is there another way of adding space around the parent tabs that doesn't cause this problem? I understand negative padding/margins could potentially work, but is there a better solution?

Example of an ideal header (photoshopped, not screenshot): enter image description here

Here is the difference:

ul li {padding: 10px;}

Without the ul li padding, it looks like image 1. With it, it looks like image 2.

Upvotes: 1

Views: 91

Answers (1)

Jade Cowan
Jade Cowan

Reputation: 2583

@Grace Sawyer, it's an issue of specificity. When you implement your code ul li { padding 10px; } that styling is being inherited by the list-items in your sub-menu. One way of overcoming this is to add selecting those submenu list-items and setting their styling directly. This way it overrides the inherited styling. If you need a refresher or are new to CSS, this is a good article that I always refer back to for referencing specificity.

If you add these lines of code to your CSS, you'll get your desired results 

nav ul li { padding: 15px; }

nav ul li ul li { padding: 0px;}

I also forked your jsfiddle and implemented the code, so you can see it in action here.

Upvotes: 2

Related Questions