Forums

MBM

I have a 3 pixel border on hover. When I hover over a set of drop down links the border pushes down the text. How do I fix this? I have tried adding padding and adjusting margins.

http://mbmitservices.co.uk/charity/index.html

/*Navigation styling */
#navigation {
display:table;/* Webkit Fix */
margin-left:310px;
text-align:center; /* center list items*/   
margin-top:-40px;
list-style:none;
background:#586949;
font-family: 'PT Sans Narrow', sans-serif;
text-transform: uppercase;
font-size: 20px;
}

#navigation ul {
padding: 0;
list-style: none;
}

#navigation li {
list-style: none;
padding-left:30px;
height: 28px;
padding-top:3px;
text-align: center;
background-color: #586949;
display:-moz-inline-box; /* FF2 and K-Meleon */
display:inline-block;
word-spacing:0; /* reset from parent ul*/
}

#navigation li a {
color: #fff;
text-decoration: none;
display:block;
margin-top:-1px;
}

/*hide drop down links*/
#navigation li ul {
display:none;
position: absolute;
}

#navigation li a:hover {
border-bottom: 3px solid #ffffff;
}

/*drop down styling*/
#navigation li:hover ul {
display:block;
margin-left:-27px;
margin-bottom:5px;
padding-bottom:10px;
float:left;
text-align:left;
z-index:1;
width:190px;
background-color: #586949;
}

cyneWATCH

It should work to just remove 3px from the padding when hovering.
This works:

.button {
	background: orange;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
}
.button:hover {
	border: 3px solid black;
	padding: 7px;
}

Just remove the border width from the original padding. It might work also without the box-sizing, but I haven't tested that.

MBM

That didn't work and i don't want to remove the border width, I want a 3px border on hover.

Paulie_D

The code given doesn't affect the border width...it changes the padding.

MBM

I know. I tried it and it didn't work.

treehouse : what would you like to learn today?

Forums

Hover Effect 'Pushing' Text In Drop Down