Navigation hover class

HTML & CSS
1

The problem :

When hovering they all get active, insteed of one link.
I’ve tried and tried and tried and that for about a few hours but couldn’t solve.

I atleast could make hover work over li classes, which I worked my ass off trying css codes.

:injured:

If anyone could help with this appreciated it very much ! :slight_smile:
If its possible I’d like to know what I have to do to restore it and the code, so I can learn from it.

Navigation CSS

ul#navigation {
	list-style-type: none;
	position:relative;
	float:right;
	left: auto;
	margin-right: -20%;
	margin-top: 2%;
}

ul#navigation li {
	float:right;
	text-decoration:none;
	position:relative;
	display:inline;
	width:130px;
	color:#ffffff;
	height:46px;
	margin: 0px 0px 0px 0px;
}

ul#navigation li a {
	text-align: center;
	text-decoration:none;
	font-family:Tahoma,Arial,Helvetica,sans-serif;
	font-size:11.2px;
	width: 9em;
	padding:15px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	font-weight: bold;
	position:relative;
	color:#ffffff;
	background:url("img/navmid.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
ul#navigation .begin {
	background:url("img/navleft.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
#navigation:hover .begin {
	background:url("img/navleftover.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
#navigation:hover .end {
	background:url("img/navrightover.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
#navigation .end {
	background:url("img/navright.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
#navigation:hover .mid {
	background:url("img/navmidover.png") no-repeat;
	width:130px;
	height:46px;
	color:#fff;
	text-decoration:none;
	}

Navigation HTML


<div id="navigation">
		<ul id="navigation">
		<li><a href="#" class="end">Home</a></li>
		<li><a href="#" class="mid">Home</a></li>
		<li><a href="#" class="mid">Home</a></li>
		<li><a href="index.html" class="begin">Home</a></li>
		</ul>
		</div>
2

There’s your problem - you’ve put the :hover on #navigation, but it’s the <ul> than has id=navigation, so the effect applies whenever you hover over the <ul>.

You need to change it to
#navigation a.begin:hover {...}
and likewise for the other hover declarations.

3

ALSO used “id=navigation” twice. IDs must be UNIQUE to the element, if you use it in one element you cant use it in ANY other.

after that is fixed. You can SIMPLIFY your CSS:


#navigation {
	list-style-type: none;
	position:relative;
	float:right;
	left: auto;
	margin-right: -20%;
	margin-top: 2%;
}

#navigation li {
	float:right;
	text-decoration:none;
	position:relative;
	color:#fff;
	height:46px;
	margin: 0;
	height:46px;
}

#navigation li a {
	text-align: center;
	text-decoration:none;
	font-family:Tahoma,Arial,Helvetica,sans-serif;
	font-size:11.2px;
	width: 9em;
	padding:15px 0px 0px 0px;
	margin:0;
	font-weight: bold;
	position:relative;
	color:#fff;
	background:url("img/navmid.png") no-repeat;
	width:130px;
	height:46px;
	display:block;
}
#navigation li.begin {background:url("img/navleft.png") no-repeat;}
#navigation:hover li.begin:hover {background:url("img/navleftover.png") no-repeat;}
#navigation:hover li.end{background:url("img/navrightover.png") no-repeat;}
#navigation li.end:hover {	background:url("img/navright.png") no-repeat;}
#navigation  li.mid {	background:url("img/navmidover.png") no-repeat;}

I could simplify it further… but I don’t know if you have a reason for all the Position:relatives…

4

And again, thanks you I recommend everyone this forum most helpfull forum.