/* CSS Document */

<html>



<head>

<style type="text/css">
body {background-color: red}
body {color: black}
h1 {background-color: black}
h1 {color: yellow}
h2 {background-color: red}
h2 {color: red}
p {background-color: white}
p {color: black}
/*HTML colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
also: azure, lightblue, lightcyan, yellowgreen*/
</sty

</head>

<body

#button {
width: 150px;
border-right: 1px solid purple;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family:  'Arial', sans-serif;
font-size: 90%;
background-color: white;
color: purple;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 4px solid white;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 02px solid grey;
border-right: 02px solid white;

background-color:white;
color: grey;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 02px solid grey;
border-right: 02px solid CCCCCC;
background-color: CCCCCC;
color: white;
}

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>