Dropdown List Alignment Issue (html/css)

I've asked a question like this before, but I am using differnt code to last time. I'm trying to create a dropdown menu. Ther are certain elements in that main list that have a dro

Solution 1:

Some element on the web page have standard padding values. For example all lists have padding-left. If you want to change this try this:

Add this in your CSS code:

ul {
   padding: 0;
}

Or you can add come specific id or class for this menu, and change padding for them.

Solution 2:

You just need to add padding: 0 to your nav ul ul rule so it appears like so:

navulul {
    display: none;
    position: absolute;
    padding: 0;
}

By default, ul elements have a left padding of 40px, you need to remove that padding to make the second level ul align with the first.

Solution 3:

I just want to say a big thank you for all your answers. I don't know why it's taken so long, but I've finally figured it out.

In the codepen I displayed, there was one important thing I was leaving off: The CSS file for the Mobile-Responsive framework known as Foundation. That CSS File had all ul tags have a margin-left of 1.25em. That is why the ul tag was moved over to the right.

To fix this problem, I changed the following:

navulul {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
}

I added a margin property and now it is all fine.

Again, thank you to everyone who helped me with this answer and sorry for wasting your time.

I wish you all well.