How to make entire list item clickable?

Question

I want to know how can I make the left and right side of the list item clickable. In my case right side is clickable but left side isn't. Any help?

My HTML

    <body>
    <aside id = "aside">
    <div id="column">
        <ul >
        <li> <a href="">Dashboard</a></li>
        <button><li ><a href="">Catalog</a></button>
        <div id ="s"><ul>
        <a href=""><li><li id="list"> Catogeries</a></li>
        <li> <a href="">Departure Location</a> </li>
        <li><a href="" >Return Location </a></li>
        <li> <a href="">Cities </a></li>
        <li> <a href="">Vendor </a></li>
        <li><a href="">Discount Coupons</a></li>
        <li> <a href="">Remaining Seats </a></li>
        </ul>
        </div>
        </li>
        <button><li><a href="">Customers</a></button>
        <div id ="m"><ul >
        <li><a href="">Customers</a></li>
        <li><a href="">Orders</a></li>
        <li><a href="">Reward System</a></li>
        </ul>
        </div>
        </li>
        <li id="report"><a href="">Reports</a>
        <ul>
        <li><a href="">Monthly</a></li>
        <li><a href="">Comission Report</a></li>
        <li></li>
        </ul>
        </li>

        </ul>
    </div>
    </aside>
</body>

My CSS

 #aside{
    margin-left: -70%;
    margin-top: -20%;
    background-color: grey;
    border-style: solid;
    width: 46%;
    color: white;
}
#aside ul li{
    list-style: none;
    padding-top: 10%;
    text-decoration: none;
}
#aside ul li a{
    text-decoration: none;
    color: white;
    font-family: Tahoma;
    display: block;

}

enter image description here

You HTML is invalid. Only `li` can be direct children of `ul`. — Paulie_D, Apr 24 '15 at 12:30
@MusadiqKhan That comment clarifies what you want, and this is in no way reflected in your original question. Consider revising it to explain better what you are trying to achieve. As it stands, it sounds like you want a list item with two parts to it, clickable text and non-clickable text. — leigero, Apr 24 '15 at 12:35
If you want that area to be clickable, you need to remove the margin / padding from your `ul`. — putvande, Apr 24 '15 at 12:35
Yes, he wants all the width to be clickable, so he need to use padding only for anchors and no margin at all (or text-indent maybe). — skobaljic, Apr 24 '15 at 12:38
possible duplicate of [How do I make the whole area of a list item in my navigation bar, clickable as a link?](http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a) — leigero, Apr 24 '15 at 12:56

score 1 · Accepted Answer · answered Apr 24 '15 at 12:49

This is possible, and you can keep your current look. What you need to do is remove margins and padding from the UL and LI tags. Then add left padding to the tags equal to the desired margin. Optionally, in your CSS, set the A tag's display to block so that the entire row, to make the white space to the right of the link clickable as well.

Here is a quick block of CSS that might do what you need:

ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style:none;
}
a {
  display:block;
  padding-left: 3rem;
}

score 0 · Answer 2 · answered Apr 24 '15 at 12:49

I guess easiest way is to turn off nesting in ul element by setting padding-left to 0, and then set proper padding on a element depending on level. Example:

#aside ul a {
    padding-left: 10px;
}
#aside ul ul a {
    padding-left: 40px;
}
#aside ul ul ul a {
    padding-left: 70px;
}

Fiddle: http://jsfiddle.net/46ho5aax/

How to make entire list item clickable?

2 Answers2