Issue with padding and drop down menu

HTML & CSS
1

Been a while since I’ve posted here and also a while since I’ve really dug into CSS. I’m having an issue with a nav menu with drop downs. I’ve made a very basic jsfiddle of my issue: http://jsfiddle.net/94y8b/1/

If you hover over the icon on the left of the navigation, you can see that the right side of the icon has no padding (should be equal to the left). If you hover over “articles,” there is padding and it works like intended. It appears that only when using images does the padding get messed up. I know… I could use background images, but what I’m doing is throwing together some icons in the nav using font-awesome and they react the same way as images do, i.e., no padding on the right side of the anchor.

A couple things seem to be affecting it:

#nav ul {
	width: 180px;
	visibility: hidden;
	position: absolute;
	top: 27px;
	background: #444;
	padding: 5px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

If I remove the position:absolute from the sub-menu, then it’s fine, but of course, that messes up the top level navigation menu since it has to make space for the sub menu now that it’s back in the flow of the html.

#nav li {
    list-style: none;
   	float: left;
	margin-right: 5px;
}

I also noticed that removing the float: left from #nav li would fix the padding issue but of course, then the top level navigation items are no longer horizontal. So… you can see the issue there.

Any ideas as to what I can do to fix this?

Thanks

2

Set the first level anchor to display:block otherwise vertical padding does not affect the line height and the right padding will slide out of the box.


#nav li > a {
padding: 6px 12px;
display:block
}
3

Thanks, Paul. That did the trick.