Solved

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

Posted on 2015-01-19
4
201 Views
Last Modified: 2015-01-20
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
0
Comment
Question by:doug s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40558904
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
 
LVL 3

Expert Comment

by:Morgan Finley
ID: 40559036
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
 
LVL 3

Accepted Solution

by:
Morgan Finley earned 500 total points
ID: 40559055
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
 
LVL 4

Author Comment

by:doug s
ID: 40561037
Thanks Morgan this will get me started.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question