No replies
kmaar
kmaar's picture
Offline
newbie
Copenhagen, Denmark
Last seen: 10 years 37 weeks ago
Copenhagen, Denmark
Timezone: GMT+1
Joined: 2012-01-07
Posts: 2
Points: 4

Hi there,

So, I'm trying to target a specific list item with "li:nth-child()" and make the background image switch on hover and act as a link, just like on this page: http://www.design.kristianmaar.dk/portfolie.html

Now, I COULD make it a regular div, position:absolute; margin: 20px 0 0 820px; but I'm stubborn and I want to ask you guys before I go with this version.

How do I style the list item to act as a link properly?

Link:
www.design.kristianmaar.dk

Code part I'm struggling with:

#menu li:nth-child(10), #menu li:nth-child(10) a {
background-image: url('images/mail.png');
background-repeat: no-repeat;
width: 34px; height: 26px;
display: inline-block;
text-indent: -9999px;
list-style: none;
}
#menu li:nth-child(10) a:hover {
background-image: url('images/mailh.png');
background-repeat: no-repeat;
}