Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 316
  • Last Modified:

mouseover effect not filling button

Why is there a gap on the mouseover effect on the navigation bar on items that don't have drop down buttons?  See last 5 buttons on right.

http://nsitedesigns.com/nsitedesigns/lakeshore/index.html
http://nsitedesigns.com/nsitedesigns/lakeshore/lakeshore.css
0
nsitedesigns
Asked:
nsitedesigns
  • 3
  • 2
  • 2
2 Solutions
 
jtwcsCommented:
Line 199 of lakeshore.css

Remove display: inline-table

nav ul {
	background: #000; 
	padding: 0px; 
	list-style: none;
	position: relative;
	/* display: inline-table; remove this */
	margin:0px;
}

Open in new window

0
 
GaryCommented:
You might want to add some padding-bottom to nav ul li a {} (along with the above)
0
 
nsitedesignsAuthor Commented:
Well that too care of the mouseover not filling up button but now the navigation words are resting on the bottom of the nav bar.  I tried adding padding and margin to nav and the nav ul but that didn't fix it.  What would you recommend?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
GaryCommented:
See above.
0
 
jtwcsCommented:
As Cathal pointed out above, just add some bottom padding to the nav <a> tags.

Line 228.  Add some bottom padding or change it to something like this.

nav ul li a {
			display: block; 
			padding: 4px 22px;
			color: #fff; 
			text-decoration: none;
		}

Open in new window

0
 
nsitedesignsAuthor Commented:
Missed Cathal's suggestion of adding padding to nav ul li a.  that did trick
0
 
nsitedesignsAuthor Commented:
thanks team!
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.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now