CSS Newb Question - Even Width for Menu Tab's background Hover

I'm trying to get my menu background's hover to have an even width, or at least so the menu tab's hover background's are flush with each other.

Right now when you hover over the menu tabs there's a gap between them.

I've tried playing with the menu's li ul padding and margins to extend this however I can't seem to figure out how to control the gap. The background hover is also bleeding too high vertically.

Just trying to figure out what class/rule can control this.

Any help appreciated.

Example PSD of what I'm trying to achieve is attached.

Website URL: http://7pwc.moshpitdigital.com
Screen-Shot-2015-01-19-at-2.11.25-PM.png
LVL 4
doug sAsked:
Who is Participating?
 
Morgan FinleyConnect With a Mentor Commented:
I think something is going on with how the drop-down is positioned, but strangely I can't find any positioning properties going on, nor margins and padding. I think you might just have to take the dirty solution of negative margins. Give this a try:

#nav ul li {
padding-right: 0;
margin: 0 -3px;
}
#nav > ul > li > a {
padding: 0 27px 0 27px;
}

Open in new window

0
 
Morgan FinleyCommented:
My guess on this one is to remove the extra padding from the right of the list items, which is currently set to padding-right: 30px; and then add 15px of padding to each side of the link within the list items.

#nav ul li {
padding-right: 0;
}
#nav > ul > li > a {
padding: 0 27px 0 27px;
}

Open in new window

0
 
Morgan FinleyCommented:
After digging some more, I see what you're talking about. I've got the items to display wider, but there's still a small gap, which I can only see when I hover next to a "current" menu item.

Still digging here...
0
 
doug sAuthor Commented:
Thanks Morgan this will get me started.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.