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: http://ift.tt/1TzfELH
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 */
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire