CODEWITHSUNDEEP
htmlcss
Musadiq Khan
Musadiq Khan

Reputation: 153

How to make entire list item clickable?

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

Upvotes: 0

Views: 2284

Answers (2)

Jeff Clarke
Jeff Clarke

Reputation: 1397

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;
}

Upvotes: 1

Krzysztof
Krzysztof

Reputation: 16130

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/

Upvotes: 0

Related Questions