Why position relative isn't working? - css

Question

I have a sidebar on the page that should look like this
but What I get is this
The submenu doesn't show as it should, my code look like this
.submenu{
position: absolute;
}
.submenu ul{
height: auto !important;
background-color: transparent !important;
}
.submenu ul li{
position: static !important;
}
When I assign right: value the behavior of the component is not usual. Here is a jsfiddle
Thank you!

Answer 1

Okay I got this to work but not in the fiddle you provided. When making a fiddle for a question on overflow try to isolate only the code that pertains to the question or problem. When you add everything in there it makes it a little hard to find the related material.
I made a fiddle for you to show how it works and if you like how it is then feel free to just use that. This is a css dropdown and doesn't require any scripting. What you need to do is nestle a ul inside of the main ul's li tag. You then have to hide the nested ul to later be revealed on a hover action.
The triangle I made does not have to be a CSS3 triangle, you can use an image.
HTML
<div class="sideBar">
<ul>
<li>¿Porqué Nosotros?</li>
<li><span class="tri"></span>Pregrado
<ul>
<li>Diseño & Comunicación Visual</li>
<li>Comunicació y Relaciones Públicas</li>
</ul>
</li>
<li>Posgrado</li>
<li>Maestría</li>
<li>Calendario</li>
</ul>
CSS
.sideBar {
position: absolute;
top: 0;
left: 0;
background: black;
color: #fff;
width: 200px;
}
.sideBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sideBar ul li {
height: 20%;
width: 180px;
padding: 10px 0 10px 20px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.tri {
content: "";
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 10px solid red;
position: absolute;
width: 0;
height: 0;
padding: 0;
margin: 0;
left: 100%;
top: 20%;
display: none;
z-index: 1000;
}
.tri:after {
height: 38px;
left: 100%;
top: 0;
content: "";
position: absolute;
width: 10px;
display: block;
}
.sideBar ul li:hover .tri {
display: block;
}
.sideBar ul li:hover {
background: red;
}
.sideBar ul li ul {
display: none;
position: absolute;
top: 30%;
left: 100%;
}
.sideBar ul li ul li {
background: #7b7b7b;
border: none;
padding-left: 20px;
width: 260px;
}
.sideBar ul li ul li:hover {
background: black;
}
.sideBar ul li:hover ul {
display: block;
}
Here is a fiddle you can use for a visual reference.
jsfiddle
If you need more help then let me know.