Dropdown menu css - I can't work out how to apply padding to the bottom of ul parent link without affecting children

Question

I've recently had a few issues with a dropdown menu that I've created. Since putting a display:block rule in the css of my children page styling, the majority of these issues have been fixed, however now I'm faced with a new problem - I can't add padding to the bottom of the main parent navigation links, i.e "work" "about" etc, without affecting the child links in the dropdown menu, causing the spacing to change erratically - ruining the layout.

I've got everything positioned the way I want it, but I need some padding on the bottom of the main links so that they 'meet' the dropdown menu and don't leave any empty space between the two. Otherwise, when I drag the cursor downwards, the dropdown menu disappears when the cursor moves across between the gap between them. As I mentioned, this issue did not exist before adding display:block, so I know that 20px of padding-bottom under the parent menu links will fix this issue. Can anyone help me do this without creating the aforementioned problems?

My URL: www.lucieaverill.co.uk

My code:

HTML:

<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>

CSS:

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding:0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
margin-left:50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 180px;
height:auto;
}

.header ul li ul li {
margin-left:0px;
width:100%;
float:none;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
transition: .1s background-color;
margin:0px;
padding: 14px 0px 14px 10px;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }

/* end dropdown menu */

/* end header navigation menu */

Answer 1

Thanks for the answers, I tried a few things out and found something that worked! Here's the updated CSS, I added padding to the bottom of the nav links and a margin to the top of the dropdown ul container.

/* header navigation menu */

.header nav ul{
display:block;
float:right;
padding:0;
margin-top:15px;
list-style:none; 
}

.header nav ul li {
float:left;
padding: 0px 0px 15px 0px;
margin-left: 50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
margin:15px 0px 0px 0px;
width: 180px;
height:auto;
}

.header ul li ul li {
padding:0px;
margin-left:0px;
width:100%;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
padding: 14px 0px 14px 10px;
transition: .2s background-color;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }


/* end dropdown menu */

/* end header navigation menu */

Answer 2

On your ul element you have set margin-top: 15px; this is also affecting the sub-menu ul creating a gap and breaking the :hover state displaying your sub-menu. There are tons of ways to fix this. First thing I thought of would be to change your sub-menu to have padding instead of margin to close up the gap.

.header nav ul ul { 
    position:absolute; 
    left: -999em; 
    margin-top: 0;
    padding-top: 15px;
}

This will close up the gap and this keep the menu in the same position.

Answer 3

You need the specific CSS path to the element that you want to add padding to.

To do this (using Chrome):

1. Right click the element and click "inspect element".
2. Under the "elements" tab, navigate to the specific thing you want to target.
3. Right click it and choose "copy CSS path".
4. Paste into your CSS and use that as the path to the element you can't add padding to.

What's great about this option, is that if you are dealing with list items (as you are), it will select the index of that specific item in the CSS path so that only the item you want is affected.