下拉菜单问题 - 纯 css

Question

你好 Whosebugers

我尝试用纯 css 制作一个下拉菜单，但我遇到了一个让我崩溃的问题。

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>

好的，所以当我将鼠标悬停在 "ALLMÄNT" 上时一切正常，下拉菜单从 display:none 弹出到 display:block，但是当我尝试将鼠标悬停在 [=31] 上时=] 下拉菜单关闭。

仅供参考：此代码本身位于下拉菜单中，"KATEGORIER" 也是一个下拉菜单，但我没有粘贴它的 CSS

干杯！

编辑：添加了一个 fiddle: http://jsfiddle.net/xc6nx12x/ ，不是最漂亮的，但是是的

Answer 1

我已经更改了您的 </ul> 的位置并且它似乎有效：

<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>

请fiddle这个。

下拉菜单问题 - 纯 css

Dropdown menu issue - pure css

html

css

drop-down-menu