Is there a way to make both the left and right sides of a list item clickable? Currently, only the right side is clickable in my case. Any suggestions?
This is 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">Categories</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="">Commission Report</a></li>
<li></li>
</ul>
</li>
</ul>
</div>
</aside>
</body>
Here's 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;
}