I’m struggling with the CSS below, the “nav li a” text state is not properly aligned with the “nav li hover”. I was hoping someone here can help me proplerly arrange the code below.
A simple way to fix this is to reduce the padding on hover by the same value as the border i.e. 1px all round. So give #nav li a:hover and #nav li.active a padding:4px 14px;
There’s no need to declare margins again on hover and .active.
#nav li a needn’t have display:block; because floated elements are automatically set to block.
As #nav li a:hover and #nav li.active a are identical they can be combined into one rule.
Remember you only need to declare things that you want to change on hover, I would just set a border even it’s not visible so that you don’t have to adjust padding. All you’re wanting to do is change colours on hover.
#nav li a
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: #fff;
float: left;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
line-height: 100%;
margin: 6px 20px 0 20px;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px #233a20;
text-transform: uppercase;
border: 1px solid transparent; /* or whatever color the backgroud is */
}
#nav li a:hover, #nav li.active a
{
border-color: #8ab713;
background-color: #a73246;
}