Vertical submenu with divs - html

Question

I'm trying to place submenu right below its's choosing option like this but when I set left and right attributes on 0
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}
it has whole site's width. When I set them on auto it looks like this.
How do I place my submenu exactly below this div or, what would look even cooler, on it's right?
Code (whole JSFiddle in comments):
HTML:
<div id="sidebar">
<div class="sidebar_option">Strona główna</div>
<div class="sidebar_option">Galeria</div>
<div class="sidebar_option">Reżyserzy
<div class="sidebar_wrapper">
<div class="submenu" style="margin-top:10px">Quentin Tarantino</div>
<div class="submenu">Bracia Coen</div>
<div class="submenu">Wes Anderson</div>
</div>
</div>
<div class="sidebar_option">Ulubione filmy</div>
<div class="sidebar_option">Seriale</div>
<div class="sidebar_option">Kontakt</div>
</div>
CSS:
.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}

Answer 1

I think the key is you need to set the position of the sidebar_option to relative so that the submenu_wrapper will be position in relation to the sidebar instead of the window. Then some value for left and right for the submenu. It can be anything, but if you want it centered they need to be the same.
.sidebar_option {
position: relative;
}
.sidebar_wrapper {
position: absolute;
background-color:lightgray;
left: 5%;
right: 5%;
z-index: 2;
}
Here's the updated jfiddle: https://jsfiddle.net/8d3p50hy/13/