Menu Hover Color Outline

Hi, not sure if you are wanting the outline on hover, or when not hovered. If for hover, the following would be a starting place.

.main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a {
	color: #fff !important;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	opacity: 1 !important;
}

Note that I’ve used !important twice. You may not need those, but in the web inspector, I did. Try it without the keyword. Also, I forced white on the text color and the opacity to 1. You can remove those if you desire.

The following puts the outline on the menu text all the time.

.main-navigation a {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

Let me know if this isn’t what you were wanting.

This is what I was looking for. I used the CSS code you gave me but took out one part. Here is what I used.

‘.main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a {
text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
opacity: 8 !important;
}’

I would like the weight of the outline to be less so that it is thinner. How do I do this?

Also, I had no underline in my menu but there is one now. I used the following CSS code:

‘#header .nav li a {
text-decoration: none;
}’

That kept my menu not underlined. I also have the menu bolded but I am not sure if these CSS are contradicting and canceling out.

Here is my bold CSS:

‘#header .nav li a{
font-weight : bold;
}’

So I want the Menu bold, not underlined and to have a thin outline. Can you help with any of this?

I would like the weight of the outline to be less so that it is thinner. How do I do this?

We can’t do that. 1px is the narrowest we can go since pixels do not have fractional sizes, 1px is the smallest.

The code that I worked out for you is a CSS trick since the only browsers that support text-stroke-width are webkit based (Safari and Chrome), and even then, the thinnest we can go is 1px.

Also, I had no underline in my menu but there is one now. I used the following CSS code

That was sort of an unfortunate side affect, but the following will take care of that.

.main-navigation a:hover {
	text-decoration: none !important;
}

The code we added would not cancel the bold font weight, but the black outline we put on them would make them appear to be less bold since it takes up 1px around the letters and the little voids in the letters.

Your help was great! Everything works. Thank you!

Hooray and you are welcome!