Make entire <li> clickable link

I have a <ul> menu and I would like each <li> to be clickable no matter where you click in it.  Is there a good way to do this?
Bob SchneiderCo-OwnerAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
andreizzConnect With a Mentor Commented:
Yes, use it like this:
<ul>
    <li><a href="google.com">Link 1</a></li>
    <li><a href="google.com">Link 2</a></li>
</ul>

Open in new window

0
 
Bob SchneiderCo-OwnerAuthor Commented:
Not working for this:

<ul style="list-style-image:url('/mobile/graphics/stopwatch.jpg');text-align:left;margin-left:45px;">
	
			<li style="height:25px;background-color:#ececd8;margin:5px;padding:0 0 5px 5px;">
				<a href="/mobile/welcome.asp" style="color:#293e6a;font-size:1.5em;">Welcome Page</a>

			</li>
			<li style="height:25px;background-color:#ececd8;margin:5px;padding:0 0 5px 5px;">
				<a href="/training/trng_home.asp" style="color:#293e6a;font-size:1.5em;">Training</a>
			</li>
		
</ul>

Open in new window

0
 
andreizzConnect With a Mentor Commented:
you mean also the stopwatch img shown instead of the bullet?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Bob SchneiderCo-OwnerAuthor Commented:
Yes and the entire <li> is a link
0
 
andreizzConnect With a Mentor Commented:
<ul>
    <a href="google.com"><li>Link 1</li></a>
   <a href="google.com"> <li>Link 2</li></a>
</ul>

Open in new window


then try this but it's not W3 valid.
0
 
doitnissConnect With a Mentor Commented:
Try this
add the following to you css header or attached css fiile

.linkbox {
      height: auto;
      width: auto;
}

then add this to the you li list

<ul>
    <li><a href="google.com" class="linkbox">Link 1</a></li>
    <li><a href="google.com" class="linkbox">Link 2</a></li>
</ul>

0
 
Bob SchneiderCo-OwnerAuthor Commented:
Nope.  Nothing yet.
0
 
andreizzConnect With a Mentor Commented:
I seriously think that it cannot be done if you user list-style-image, if you make your own effect like list-style-image that will work.
0
 
Bob SchneiderCo-OwnerAuthor Commented:
I moved the image to inside the <a> and made the list-style: none.  Still no luck.
0
 
andreizzConnect With a Mentor Commented:
You can't i'm telling you, it's because you can't modify that css property behaviour.

The only way to do this is to somehow put a div in front and make it behave like a bullet.
0
 
Bob SchneiderCo-OwnerAuthor Commented:
Thanks for your help!
0
 
andreizzConnect With a Mentor Commented:
If you want, send me the stop watch picture and i will try the div work around.
0
 
Bob SchneiderCo-OwnerAuthor Commented:
You know it is not that big of a deal.  Thanks anyway!
0
All Courses

From novice to tech pro — start learning today.