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

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>Home</li>
</ul>
<ul>
<li>Content</li>
</ul>
<ul>
<li>Requirements</li>
</ul>
<ul>
<li>
Languages
<ul>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</li>
</ul>
<ul>
<li>
Frameworks
<ul>
<li>Less</li>
<li>Sass</li>
<li>Flexbox</li>
</ul>
</li>
</ul>
<ul>
<li>Projects</li>
</ul>
<ul>
<li>Instructor</li>
</ul>
<ul>
<li>Reviews</li>
</ul>
<ul>
<li>Blog</li>
</ul>
<ul>
<li>Contact</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>Home</li>
</ul>
<ul>
<li>Content</li>
</ul>
<ul>
<li>Requirements</li>
</ul>
<ul>
<li>
Languages
<ul>
<li>JavaScript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</li>
</ul>
<ul>
<li>
Frameworks
<ul>
<li>Less</li>
<li>Sass</li>
<li>Flexbox</li>
</ul>
</li>
</ul>
<ul>
<li>Projects</li>
</ul>
<ul>
<li>Instructor</li>
</ul>
<ul>
<li>Reviews</li>
</ul>
<ul>
<li>Blog</li>
</ul>
<ul>
<li>Contact</li>
</ul>
</div>
</nav>