Dropdown menu issue - pure css - html

Question

Hello Stackoverflowers
I try to make a dropdown menu in pure css but I get one problem that's tearing me apart.
CSS:
ul #mul-s
{
padding-top:17px;
padding-bottom: 10px;
margin-left: 7px;
text-align: center;
}
.main-ul .main-li ul li.allmant
{
padding-bottom: 4px;
text-align: center;
}
.main-ul .main-li ul li.allmant ul.ul-s
{
padding-top: 7px;
margin-left: 5px;
text-align: center;
}
.main-ul .main-li ul li.allmant ul.ul-s li.li-s
{
display: none;
}
.main-ul .main-li ul li.allmant:hover ul.ul-s li.li-s
{
display: block;
}
HTML:
<li class="main-li">KATEGORIER ▾
<ul id="mul-s"> <!-- Kategorier sub1 -->
<li class="allmant">ALLMÄNT <!-- ALLMÄNT OPEN LI -->
<ul class="ul-s"> <!-- SUB FOR ALLMÄNT - OPENING UL -->
<li class="li-s">BLABLABLA<hr></li>
<li class="li-s">Shopping<hr></li>
<li class="li-s">Q&A<hr></li>
<li class="li-s">Fogels<hr></li>
<li class="li-s">Musik & Film</li>
</ul> <!-- SUB FOR ALLMÄNT - CLOSING UL -->
</li> <!-- ALLMÄNT CLOSE LI -->
<hr>
<li>KREATIVT</li>
</ul> <!-- Kategorier sub2 -->
</li>
Okay, so when I hover over "ALLMÄNT" Then everything is good, the dropdown menu pops from display:none to display:block, but then when I try to hover over "KREATIVT" the dropdown menu closes.
FYI: This code is in a dropdown by it self, "KATEGORIER" is a dropdown menu too, but I have not pasted it's CSS
Cheers!
EDIT:
Added a fiddle: http://jsfiddle.net/xc6nx12x/ , Not the prettiest, but yeah

Answer 1

I have change the location of your </ul> and it seems to work:
<div id="fixed-nav">
<ul class="main-ul">
<div style="position: absolute; height: 50px; background-color: rgb(233, 233, 233); top: 0px; left: 65%; width: 1.3px;" class="vline"></div>
<li class="main-li">KATEGORIER ▾
<ul id="mul-s">
<!-- Kategorier sub1 -->
<li class="allmant">ALLMÄNT
<!-- ALLMÄNT OPEN LI -->
<ul class="ul-s">
<!-- SUB FOR ALLMÄNT - OPENING UL -->
<li class="li-s">BLABLABLA
<hr>
</li>
<li class="li-s">Shopping
<hr>
</li>
<li class="li-s">Q&A
<hr>
</li>
<li class="li-s">Fogels
<hr>
</li>
<li class="li-s">Musik & Film
</li>
<!-- SUB FOR ALLMÄNT - CLOSING UL -->
</li>
<!-- ALLMÄNT CLOSE LI -->
<hr>
<li>KREATIVT
</li>
</ul>
</ul>
<!-- Kategorier sub2 -->
</li>
</ul>
</div>
Please fiddle this.