Using background image for nav link

HTML & CSS
1

How do I make a navigation link to have a background when the mouse is hovered on it, I have attached a screenshot that shows the link.
Please understand that the link doesn’t have a background when is not active or hovered on.

Thanks guys

2

you can use the pseudo class :hover on the link.

3

I did that, but the whole background wasn’t showing

4

it works for me, so post your code then, and we can try to help you fix it.

5

Background images don’t force an element to be larger to fit the background image. The background will be cropped if it’s larger than the element.

If you want a full background image to show you’ll need to set a height / width on the element.


a {
  display: block;
  height: 20px;
  line-height: 20px;
}

links are inline by default so height / width won’t apply unless you set display to block or inline-block.

6

Can I just code that with CSS without images?

7

Based on your image above, yes.

  • Set a background color of white on the link on :hover
  • apply rounded corners to the link
  • using :before or :after, create the little white triangle at the bottom that also appears just on hover.
8

I am able to do the first two;

  • Set a background color of white on the link on :hover
  • apply rounded corners to the link

But can’t figure out the best way to do the third;

  • using :before or :after, create the little white triangle at the bottom that also appears just on hover.

Here is my markup


<nav class="top-nav">
	<ul>
		<li><a href="" class="home">home</a></li>
	
	</ul>
</nav>



.top-nav ul li a{
    padding: 5px;
    text-decoration: none;
    text-transform: capitalize;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 }
 
.top-nav ul li a:hover{
	 background:#fff
}

I’m not that good with navigation in CSS

Thanks for helping

9

I came across an article http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

For anyone interested on how i fixed mine.

10

Ah, cool, you have probably found the answer already before I could reply. This is one way to do it, anyhow:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
body {background: #ccc;}
ul {list-style: none; }
li {float: left; margin-right: 4px; position: relative;}
li a {padding: 5px 10px; display: block; text-decoration: none;}
li a:hover {background: white; border-radius: 2px; }
li:hover a:after {
	position: absolute;
	display: inline-block; 
	width: 0;   
	height: 0; 
	border-width: 5px;
	content: ' ';
	border-top-style: solid;
	border-top-color: #fff;
	border-bottom-style: solid;
	border-bottom-color: transparent;
	border-left-style: solid; 
	border-left-color: transparent;
	border-right-style: solid; 
	border-right-color: transparent;
	top: 100%; left: 40%;
}
</style>
</head>

<body>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a></li>
</ul>
</body>
</html>
11

Thanks ralph, yours helped because I was having problem applying the :after to hover.

12

Cool. Only thing I didn’t get quite right is the centering of the arrow. This is a little better, though not quite sure why!


li:hover a:after {
	position: absolute;
	display: inline-block; 
	width: 0;   
	height: 0; 
	border-width: 5px;
	content: ' ';
	border-top-style: solid;
	border-top-color: #fff;
	border-bottom-style: solid;
	border-bottom-color: transparent;
	border-left-style: solid; 
	border-left-color: transparent;
	border-right-style: solid; 
	border-right-color: transparent;
	top: 100%; 
	[COLOR="#FF0000"]left: 50%;
	margin-left:-5px;[/COLOR]
}
13

The 50% is the left edge of the element and if the element is 10px wide it needs to be then shifted back leftwards by 5px to be centred :slight_smile:

14

Duh, I was thinking of it as 5px wide, not 10px. I don’t even understand my own code. :blush: