I copied some code in a seperate file and can get this to work fine. However whenever i try to apply it to this site im already building it wont work.

 

HTML - This is how make the list of links

<div id="leftSide">

 <div class="lNav">
	   <div class="lNavHeader"><div class="lnavTitle">Articles</div></div>

		<ul>
   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
	   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
		</ul>


 </div>



</div>

 

 

Here is the css to try and make it get the hover effect

 

.lNav ul {

  list-style: none;


}

.lNav li {


  background-image: url(i.gif);
  background-repeat: no-repeat;
  padding-bottom: 10px;


}

.lNav a{

  display: block;
  padding-left: 20px;
  text-decoration: none;
  font-size: 0.9em;
  color: #093a33;
  font-weight: bold;


}

.lNav a: hover {
background-color: #369;
color: #fff;

}

.lNav a: link, .lNav a: visited{

}

You may have to set up your nav slightly differently as below.

 

<ul id="1Nav">
<li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
   <li><a href="newpage.html">Home</a></li>
</ul>

 

Then css as below

 

#1nav {margin:0 auto;} settings you need go in the #nav

#1Nav ul {

  list-style: none;


}

#1Nav li {


  background-image: url(i.gif);
  background-repeat: no-repeat;
  padding-bottom: 10px;


}

#1Nav a{

  display: block;
  padding-left: 20px;
  text-decoration: none;
  font-size: 0.9em;
  color: #093a33;
  font-weight: bold;


}

#1Nav a: hover {
background-color: #369;
color: #fff;

}

#1Nav a: link, .lNav a: visited{

}

 

HTH

 

Pat

So basically, it needs to be an id rather than a class?

i tried it your way, and all that happened was i lost all formatting on the links. Then i changed back to my original and the link formatting came back, and then i replaced the class lnav with id lnav and its the same as before.

 

is there some sort of rule to making this work im missing out on?

 

Ive attached both files for more help

index.htm

style.css

Try this

 

I made the elements more specific - '.lNav ul li a' rather than just '.lNav a' (etc) because it's better practice, and has less risk of overriding other lists on the page with your navigation styling.

 

But I believe the problem you were having was that you added a space, it needs to be 'a:hover' not 'a: hover'

 

Hope that helps

 

.lNav ul {
  list-style: none;
}

.lNav ul li {
  background-image: url(i.gif);
  background-repeat: no-repeat;
  padding-bottom: 10px;
}

.lNav ul li a {
  display: block;
  padding-left: 20px;
  text-decoration: none;
  font-size: 0.9em;
  color: #093a33;
  font-weight: bold;
}

.lNav ul li a:hover {
background-color: #369;
color: #fff;
}

.lNav ul li a:link, .lNav ul li a:visited{

}

Thats it working now thanks. Just a quick question though. I have an image beside the link in the list. when it hovers the image disappears, i take it there is no way around this?

Actually, another quick question about the links. Ive got the hover working and i have dropped the image beside the list.

The hover is covering the full length of li and li a which are the same length.

 

The ul is set to 150pxs and i want the li and lia to span 150px too so the background color spans the whole length, but i cant do that. if i look at web developer, i can see that the ul is set to 150px and displays properly, but even though li a and li are set to a width of 150px too they dont display in the same width as the ul. there seems to be some sort of indent that i cannot get rid off.

index.htm

style.css

without looking at the files (I'm lazy unless its a live version)

 

to keep the image on rollover:

 

at the moment you're replacing the background-image with a bavkground-color

 

to fix this

 

(non rollover version)

background:url(i.gif);

 

(rollover version)

background:#369 url(i.gif);

 

as for the weird indent, its margin

 

under .lNav ul li - set

margin:0;