Part of the reason that this is more difficult than it should be is that you aren’t using the semantically best tags. Header tags should be reserved for actual page headers. HTML 5 had a tag specifically for menus for a short time but that will not be making it to the final specification (so don’t use them if you find information about them while looking for examples on the web). For now, the best option is to use unordered lists. This won’t fix your color issue but it should reduce the amount of CSS you need to configure the other font settings. Your basic menu should look something like this:
<ul>
<li><a href="item1.html">Item 1</a>
<li><a href="item2.html">Item 2</a>
<li><a href="item3.html">Item 3</a>
</ul>
Your style definitions should look like this:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
