Question

Hello Stackoverflowers

我尝试在纯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显示：block，但是当我尝试将鼠标悬停在“KREATIVT”上时，下拉菜单会关闭。

仅供参考：这段代码是自动下拉，“KATEGORIER”也是一个下拉菜单，但我还没有粘贴它的CSS

干杯！

编辑：添加了一个小提琴：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

1 个答案: