Make A List Item Clickable (HTML/CSS)

Question

So I\'m trying to make each list-item on my site clickable but I\'m not sure what is the best way to do it. Please help me out.

So here is the relevant HTML:

Answer 1

I'm sure it is a late response, but maybe is useful for somebody else. You can put all your <li> element content into <a> tag and add the following css:

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area / or other styling */ 
    padding: 5px 20px; 
}

Answer 2

Ditch the <a href="...">. Put the onclick (all lowercase) handler on the <li> tag itself.

Answer 3

The li element supports an onclick event.

<ul>
<li onclick="location.href = 'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css';">Make A List Item Clickable</li>
</ul>

Answer 4

I think you could use the following HTML and CSS combo instead:

<li>
  <a href="#">Backback</a>
</li>

Then use CSS background for the basket visibility on hover:

.listblock ul li a {
    padding: 5px 30px 5px 10px;
    display: block;
}

.listblock ul li a:hover {
    background: transparent url('../img/basket.png') no-repeat 3px 170px;
}

Simples!

Answer 5

HTML and CSS only.

#leftsideMenu ul li {
  border-bottom: 1px dashed lightgray;
  background-color: cadetblue;
}

#leftsideMenu ul li a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
}

#leftsideMenu ul li a:hover {
  background-color: lightgreen;
  transition: 0.5s;
  padding-left: 30px;
  padding-right: 10px;
}

<div id="leftsideMenu">
  <ul style="list-style-type:none">
    <li><a href="#">India</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Russia</a></li>
    <li><a href="#">China</a></li>
    <li><a href="#">Afganistan</a></li>
    <li><a href="#">Landon</a></li>
    <li><a href="#">Scotland</a></li>
    <li><a href="#">Ireland</a></li>
  </ul>
</div>

Answer 6

How about putting all content inside link?

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

Seems like the most natural thing to try.