What is the best way to ensure that every item on a list can be

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;

}

Answer №1

You have the ability to maintain your current appearance while achieving this. To do so, simply eliminate the margins and padding from the UL and LI elements. Then, incorporate left padding to the A tags that matches the desired margin. If you wish, you can also adjust the display property of the A tag in your CSS to block, allowing the entire row to be clickable and creating additional white space beside the link.

Below is a snippet of CSS code that may help you achieve your goal:

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

Answer №2

One simple solution is to disable nesting within the ul element by removing padding with a value of 0, and then apply customized padding to the a element based on its level. See the code snippet below for an example:

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

Check out this Fiddle for a live demonstration: http://jsfiddle.net/46ho5aax/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

Photographs within a line of HTML tables

I have been struggling with this issue, and it's honestly such a simple mistake! All I need is for each picture to be accompanied by a small box below it containing the name. I want all 4 pictures to be displayed in a row. However, when viewing this ...

Drag events fail to activate

I am facing an issue with draggable events. Even though dragStart is functioning perfectly, drag and dragEnd events are not being triggered. Below is the HTML Element in question: <div [ngClass]="select ? 'show-re' : 'hide-re'" *ng ...

Is it possible to notify the user directly from the route or middleware?

In my current setup, I am utilizing a route to verify the validity of a token. If the token is invalid, I redirect the user to the login page. I am considering two options for notifying users when they are being logged out: either through an alert message ...

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...

Guide to presenting pictures from a database using PHP

Currently, my application is able to successfully upload images by saving the file location in a MySQL database. However, I am now facing an issue when trying to display these uploaded images. Below is the code snippet causing problems: include ('co ...

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

The submit option fails to appear on the screen in the JsonForm library

I've been using the JsonForm library ( https://github.com/jsonform/jsonform ) to define a form in HTML. I have set up the schema and form of the JsonForm structure, but for some reason, the "onSubmit" function that should enable the send button is not ...

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

Having some trouble finding the input box element with Python/Selenium

I'm struggling to automate a task using Python. For some reason, I can't find the email input element with driver.find_element_by_. No matter what I try, I just can't seem to locate it. All I want is for Python to log in using Chromedriver. ...

What is the best way to iterate through only the selected checkboxes to calculate their

I am in need of calculating the selected checkboxes only within a table field (harga_obat*jumlah) Below is my foreach data: @foreach ($obat as $o) <tr> <td> <input id="check" type="checkbox" name="select[]" value="{{ $o->nam ...

Curious about the distinction between express-ejs-layouts and DHTML?

According to Google search results, DHTML involves generating HTML content dynamically using Javascript. Meanwhile, EJS also claims to do the same thing with its abbreviation of Embedded JavaScript. It seems like both DHTML and EJS have similar functional ...

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

The theme I designed import { createMuiTheme } from 'material-ui/styles'; export const MyTheme = createMuiTheme({ palette: { primary: { light: '#757ce8', main: '#3f50 ...

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...