Dropdown menu issue - pure css

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"><a href="#">KATEGORIER &#9662;</a>
            <ul id="mul-s"> <!-- Kategorier sub1 -->
            <li class="allmant"><a href="#">ALLMÄNT</a> <!-- ALLMÄNT OPEN LI -->
            <ul class="ul-s"> <!-- SUB FOR ALLMÄNT - OPENING UL -->
                <li class="li-s"><a href="http://blablabla.com/">BLABLABLA</a><hr></li>

                <li class="li-s"><a href="http://blablabla.com/">Shopping</a><hr></li>

                <li class="li-s"><a href="http://blablabla.com/">Q&amp;A</a><hr></li>

                <li class="li-s"><a href="http://blablabla.com/">Fogels</a><hr></li>

                <li class="li-s"><a href="http://blablabla.com/">Musik &amp; Film</a></li>
            </ul> <!-- SUB FOR ALLMÄNT - CLOSING UL -->
            </li> <!-- ALLMÄNT CLOSE LI -->
                <hr>
            <li><a href="#"  style="padding-bottom:5px;">KREATIVT</a></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"><a href="#">KATEGORIER &#9662;</a>

            <ul id="mul-s">
                <!-- Kategorier sub1 -->
                <li class="allmant"><a href="#">ALLMÄNT</a> 
                    <!-- ALLMÄNT OPEN LI -->
                    <ul class="ul-s">
                        <!-- SUB FOR ALLMÄNT - OPENING UL -->
                        <li class="li-s"><a href="http://blablabla.com/">BLABLABLA</a>

                            <hr>
                        </li>
                        <li class="li-s"><a href="http://blablabla.com/">Shopping</a>

                            <hr>
                        </li>
                        <li class="li-s"><a href="http://blablabla.com/">Q&amp;A</a>

                            <hr>
                        </li>
                        <li class="li-s"><a href="http://blablabla.com/">Fogels</a>

                            <hr>
                        </li>
                        <li class="li-s"><a href="http://blablabla.com/">Musik &amp; Film</a>

                        </li>

                    <!-- SUB FOR ALLMÄNT - CLOSING UL -->
                </li>
                <!-- ALLMÄNT CLOSE LI -->
                <hr>
                <li><a href="#" style="padding-bottom:5px;">KREATIVT</a>

                </li>
                    </ul>
            </ul>
            <!-- Kategorier sub2 -->
        </li>
    </ul>
</div>

Please fiddle this.