navbar with submenu width impossible to get right - html

Question

so I have made a navbar with an item that has a submenu.
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>Webshop</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>
The navbar works and it's fine however i can't get the submenu items to have the proper width.
The submenu is nested inside a head which allready has a dynamic size. Since I have to use position absolute it's nearly impossible to calculate the correct width. Is there a way to have the submenu automatically have the same width as the parent?
Here is a jsfiddle.
any help is appreciated
https://jsfiddle.net/eb8k0tbo/3/

Answer 1

The need to set position:relative on the parent and then width:100% on the child.
#menu {
font-size: 0px;
width: 80%;
text-align: center;
}
.optie {
display: inline-block;
font-size: 18px;
width: calc(20% - 2px);
height: 1.5em;
line-height: 1.5em;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
border: 1px solid grey;
color: white;
font-weight: bold;
position: relative;
}
.optie a {
color: white;
text-decoration: none;
}
.optie:hover a {
//color: rgb(56,56,56);
}
.optie:hover {
color: rgb(56,56,56);
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu {
display: none;
}
.optie:hover .submenu {
display: block;
position: absolute;
border: 1px solid grey;
width: 100%;;
}
.suboptie {
display: block;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
}
.submenu a:hover {
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu a {
color: white;
text-decoration: none;
}
.suboptie:hover {
color: rgb(56,56,56);
}
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>