css3 hover

gistfile1.html

<style type=text/css> 

a.button1 {
font-family: arial;
text-decoration: none;
display: block;
height: 40px;
padding: 10px 20px;
line-height: 23px;
font-size: 13px;
font-weight: bold;
color: white;

/* text-shadow: -1px -1px 0 #555; */
text-shadow: 0px -1px 0 #555;

/*
-webkit-border-radius: 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
-moz-border-radius: 3px;
*/

/* background-image: url(https://a248.e.akamai.net/ */
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0px;
background-position-y: 0px;
background-origin: initial;
background-clip: initial;
background-color: #929292;
}


a.button2 {
font-family: arial;
text-decoration: none;
display: block;
height: 40px;
padding: 10px 20px;
line-height: 23px;
font-size: 13px;
font-weight: bold;
color: white;

/* text-shadow: -1px -1px 0 #111; */


/*
-webkit-border-radius: 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
-moz-border-radius: 3px;
*/

/* background-image: url(https://a248.e.akamai.net/ */
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0px;
background-position-y: 0px;
background-origin: initial;
background-clip: initial;
background-color: #666;
}

a.button3 {
font-family: arial;
text-decoration: none;
display: block;
height: 40px;
padding: 10px 20px;
line-height: 23px;
font-size: 13px;
font-weight: bold;
color: black;

/* text-shadow: 0px 1px 0px #ccc; */
text-shadow: 0px 1px 0px #bebebe;

/*
-webkit-border-radius: 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
-moz-border-radius: 3px;
*/

/* background-image: url(https://a248.e.akamai.net/ */
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0px;
background-position-y: 0px;
background-origin: initial;
background-clip: initial;
background-color: #929292;
}

ul.dark {
background-color: #929292;
text-decoration: none;
list-style: none;
font-family: arial;
font-weight: normal;
font-size: 13px;
padding: 20px;
line-height: 24px;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.4);
}

ul.light {
color: white;
background-color: #929292;
text-decoration: none;
list-style: none;
font-family: arial;
font-weight: normal;
font-size: 13px;
padding: 20px;
line-height: 24px;
text-shadow: -1px -1px 1px rgba(100, 100, 100, 0.4);
}


ul.light li:hover {
color: black;
background-color: #929292;
text-decoration: none;
list-style: none;
font-family: arial;
font-weight: normal;
font-size: 13px;
line-height: 24px;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.4);
}

ul.dark li:hover {
color: white;
background-color: #929292;
text-decoration: none;
list-style: none;
font-family: arial;
font-weight: normal;
font-size: 13px;
line-height: 24px;
text-shadow: -1px -1px 1px rgba(100, 100, 100, 0.4);

}


</style>


<a href="#" class="button1">Performance Parts</a>
<br />

<br />
<a href="#" class="button3">Performance Parts</a>

<ul class="dark">
<li>Brake Upgrades</li>
<li>Chain and Sprockets</li>
<li>Wheel Sets</li>
</ul>

<ul class="light">
<li>Brake Upgrades</li>
<li>Chain and Sprockets</li>
<li>Wheel Sets</li>
</ul>