make whole li clickable..

[garry]

so basically, I have an unordered list with categories. Each unordered list has a black circular box background type thing going on and has a link inside it to the category. What I want to do is make that whole box (the <li> item) clickable, as opposed to just the link. Here's the css I'm using.

 

div.block .block_content {
padding:0.5em 0.7em 0pt;
min-height:20px;
}
div.block li {
padding: 6px 0 0.2em 0.8em;
height: 24px;
background: url('../img/catli_bg.gif') no-repeat;
display: block;
}

 

And the html is just a basic unordered list. Can anyone help?

[dropfaith]

you will need to edit this to your site a bit i just grabbed it off a project im working on but its what you need as shown here

http://www.lawrenceguide.org/literature/index.php

<div class="nav">	 
   <ul id="home">
           <li><a href="http://www.lawrenceguide.org/index.php" title="about">About</a></li>
   <li><a href="http://www.lawrenceguide.org/contact.php" title="contact">Contact</a></li>
          <li><a href="http://www.lawrenceguide.org/user/index.php" title="Add Link">Add Link</a></li>
   </ul>	
</div>

 

/* left side navigation */

div.nav {
width: 140px;
height: 100%;
float:left;
padding: 0 0 0 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
}
div.nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
	}

div.nav li {		
margin: 0;width:100%;
	}
div.nav li a {
	display: block;
	padding: 5px 0px 5px 0px;
	text-decoration: none;
	width:100%;
	}
html>body div.nav li a {
	width:100%;
	}


/* end left navigation */

[garry]

Thanks for the help, i'll try that