A CSS newbie here:
I've been learning CSS as I go along developing a web page. I am
trying to make a horizontal menu link for a footer. On 'hover', I want
the linked text to have a 'bold' font for easier readability. With my
current code, the linked text moves on the hover state. If I remove
the CSS code so that the hover state text is normal and not bold, the
text does not move.
I've searched the Web and cannot find a solution, only advice not to
create bold text upon hover. That is not what I want. My CSS code is
as follows:
..footer{
float: left;
background-color: #483303;
height: 20px;
width: 731px;
}
..footer ul {
margin: 0px;
padding: 2px 0px;
list-style-type: none;
text-align: center;
}
..footer ul li {
display: inline;
}
..footer ul li a {
text-decoration: none;
padding: .05em 4em;
color: #FFFFFF;
background-color: #483303;
font-size: .75em;
}
..footer ul li a:hover {
background-color: #D79F1A;
color: #483303;
font-weight: bold;
}
HTML Code is very simple:
<div class="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
Thanks in advance for any tips.