I am currently working on creating a menu using an unordered list (ul) with a left float. Each list item (li) will contain a link, and when hovering over the li, the link should change to a transparent color. Additionally, each li has a unique ID and background image associated with it.
I have made progress on the menu, but there is a noticeable difference between the hover effect on the link and on the li. You can view my code here:
http://jsfiddle.net/mhhbs/
Here is an example of what I mean by a hover image:
Below is the CSS code I have written so far:
#nav {
font: 30px 'LeagueGothicRegular', Arial, sans-serif;
color: #f9f8cc;
width:450px;
clear: both;
height: 56px;
margin: 0px 0px 0px 50px;
background:#c2c2c2;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
list-style-type: none;
background-image: transparent;
color: #FDE99D;
float: left;
height:50px; width:100px;
border-right:1px #900 solid;
text-align:center;
}
#nav li a {
/**padding:10px 20px 10px 16px;**/
color: #000;
text-shadow: 0px 2px 2px #222;
text-transform: uppercase;
}
#nav li a:hover {
color: #999;
color:transparent !important;
text-shadow: none;
}
#nav li:hover {
background:url(http://cdn1.iconfinder.com/data/icons/duesseldorf/32/home.png) red;
background-size: 83px 56px;
color: #999;
color:transparent !important;
text-shadow: none;
}