How to make dropdown menu same width as each <li> in nav?

Question

I'm trying to create a dropdown menu, but for some reason, I cannot find a way to make its width the same as each <li> in nav.

 /* GENERAL STYLES */ * { margin: 0px; padding: 0px; } body { background-image: url("../img/paven.png"); } @font-face { font-family: "nevis"; src: url("../fonts/nevis.ttf"); } /* MENU */ nav { width: 100%; height: 40px; background-color: #333; } nav > div { width: 1000px; margin: 0px auto; } nav > div > ul { float: left; } nav > div > ul > li { list-style: none; height: 40px; padding-left: 20px; padding-right: 20px; border-right: 1px solid gray; } nav > div > ul > li > a { display: block; height: 40px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: white; line-height: 35px; } nav > div > ul > li:hover { cursor: pointer; background-color: #70B231; } /* SUBMENU */ nav > div > ul > li > ul { position: absolute; width: 100px; background-color: #70B231; }

 <!-- MENU --> <nav> <div> <ul> <li><a href="#">Home</a></li> </ul> <ul> <li><a href="#">Content</a></li> </ul> <ul> <li><a href="#">Requirements</a></li> </ul> <ul> <li> <a href="#">Languages</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> </ul> <ul> <li> <a href="#">Frameworks</a> <ul> <li><a href="#">Less</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Flexbox</a></li> </ul> </li> </ul> <ul> <li><a href="#">Projects</a></li> </ul> <ul> <li><a href="#">Instructor</a></li> </ul> <ul> <li><a href="#">Reviews</a></li> </ul> <ul> <li><a href="#">Blog</a></li> </ul> <ul> <li><a href="#">Contact</a></li> </ul> </div> </nav>

As you can see, I've tried setting a width for each <ul> , but they are not well aligned to the <li> they belong to:

I would like to achieve something like this:

Answer 1

Here you go, I've edited a few thing.

I removed the padding on the main menu li element and placed it on the a instead so the submenu can take the full width.

Added postition: relative; to the main menu li so the submenu postition: absolute will be relative to the main menu item

Made the submenu full width with width 100% and removed the list styles.

added some padding to the submenu li

 /* GENERAL STYLES */ * { margin: 0px; padding: 0px; } body { background-image: url("../img/paven.png"); } @font-face { font-family: "nevis"; src: url("../fonts/nevis.ttf"); } /* MENU */ nav { width: 100%; height: 40px; background-color: #333; } nav>div { width: 1000px; margin: 0px auto; } nav>div>ul { float: left; } nav>div>ul>li { list-style: none; height: 40px; position: relative; border-right: 1px solid gray; } nav>div>ul>li>a { display: block; height: 40px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: white; line-height: 35px; padding-left: 20px; padding-right: 20px; } nav>div>ul>li:hover { cursor: pointer; background-color: #70B231; } /* SUBMENU */ nav>div>ul>li>ul { position: absolute; width: 100%; background-color: #70B231; list-style: none; } nav>div>ul>li>ul>li { padding: 3px 10px; }

 <!-- MENU --> <nav> <div> <ul> <li><a href="#">Home</a></li> </ul> <ul> <li><a href="#">Content</a></li> </ul> <ul> <li><a href="#">Requirements</a></li> </ul> <ul> <li> <a href="#">Languages</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> </ul> <ul> <li> <a href="#">Frameworks</a> <ul> <li><a href="#">Less</a></li> <li><a href="#">Sass</a></li> <li><a href="#">Flexbox</a></li> </ul> </li> </ul> <ul> <li><a href="#">Projects</a></li> </ul> <ul> <li><a href="#">Instructor</a></li> </ul> <ul> <li><a href="#">Reviews</a></li> </ul> <ul> <li><a href="#">Blog</a></li> </ul> <ul> <li><a href="#">Contact</a></li> </ul> </div> </nav>