Hover with Image Background Not Working - Help

HTML & CSS
1

I have a horizontal nav bar made with purely CSS. Everything is working perfect except when i try to make the main <li> have a background-image hover the image does not show. Ive looked everywhere for this problem, and it seems my code is correct. What could i be missing? By the way Yes i am using a html5 doctype at the top of my editor.


<nav> <!--Top Header Nav Bar-->
	<ul>
		<li><a href="#">Explore</a>
        <ul>
				<li><a href="#">Fishing</a><hr /></li>
				<li><a href="#">Pampering</a><hr /></li>
				<li><a href="#">Weddings</a><hr /></li>
                <li><a href="#">Water Sports</a><hr /></li>
                <li><a href="#">Romantic Getaways</a><hr /></li>
                <li><a href="#">Boating</a><hr /></li>
                <li><a href="#">Cuisine</a><hr /></li>
                <li><a href="#">Private Planes</a></li>
		</ul>
        </li>
		<li><a href="#">Leisure</a></li>
		<li><a href="#">Cruises</a>
			<ul>
				<li><a href="#">Royal Caribbean</a><hr /></li>
				<li><a href="#">Carnival</a><hr /></li>
                <li><a href="#">Disney Cruise</a><hr /></li>
                <li><a href="#">Norwegian Cruise</a></li>

			</ul>
		</li>
		<li><a href="#">Beaches</a>
        <ul>
				<li><a href="#">Abacos</a><hr /></li>
				<li><a href="#">The Exumas</a><hr /></li>
                <li><a href="#">Harbour Island</a><hr /></li>
                <li><a href="#">Grand Bahama Island</a><hr /></li>
                <li><a href="#">Long Island</a></li>
			</ul>
		</li>
        <li><a href="#">Book A Trip</a></li>
	</ul>
</nav>

/* Nav Bart Style */
nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}
nav ul {
	background: #0;

	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
nav ul li {
	float: left;
}
	nav ul li:hover a{ /* Image Hover */
		background-image:url(../images/hover.png) no-repeat;
		
		
		
		
	}
		nav ul li:hover a {
			color: #0;
		}
	
	nav ul li a { /* Text Color - Top */
		display: block; padding: 15px 30px;
		color: #FFF; text-decoration: none;
	}
nav ul ul { /* Drop Down BackGround Color */
	background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 100%;
	
}
	nav ul ul li {
		float: none;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #FF0;
				opacity:0.4;
				
			}
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}
hr {
border:none;border-top:1px solid #666; /*Divide Line For Top Nav*/
border-bottom:1px solid #ccc;
width:90%;
margin:0px auto 0px auto;	
}
2

What’s wrong with this?


background-image:url(../images/hover.png) no-repeat;

‘background-image’ is not shorthand and only has one property value which is the image url. The no-repeat at the end breaks the rule and it becomes invalid.

Either use shorthand ‘background’ for multiple values or if you want individual rules then do this:


background-image:url(../images/hover.png);
background-repeat:no-repeat;
3

Hi DariusShojaei

nav ul li:hover a{ /* Image Hover */
		background-image:url(../images/hover.png) no-repeat;

Should be:

nav ul li:hover a{ /* Image Hover */
		background: url(../images/hover.png) no-repeat;

or

nav ul li:hover a{ /* Image Hover */
		background-image: url(../images/hover.png);
               background-repeat: no-repeat;

Ops! Paul O’B “The CSS Guru” was faster. :slight_smile:

4

Not by much Mauricio :slight_smile:

5

Thanks guys. Worked like a charm.

6

I do have another problem. I’m trying to just select the top ul li links so i can give them a hover background, i want the drop down list items to be a different hover affect. The problem is both of them are technically ul li. What would be the best way to just select the top list items? I tried put a <span> tag around them, but had no luck by doing that.

7

You could give them a separate class, but you can also just do this:

nav [COLOR="#FF0000"]>[/COLOR] ul li:hover a { }

That way, the rule only applies to the the links that are inside ULs that are a direct child of the nav element.

Then you can target the next level of links with

ul ul li:hover a { }
8

Sadly when i try to use nav > ul li:hover a { } to determine the background image of the top links on hover, it automatically creates a static background image on all the lower list items. Very odd. I don’t even know why it would do that. So i tried to do nav > ul li:hover { } which of course fails.

9

That’s what you get for taking the advice of an eejit like me. :blush:

Try this instead:

nav > ul li:hover [COLOR="#FF0000"]>[/COLOR] a {  }