Question

关于如何在悬停时制作纯粹的css drowndown菜单tutorial之后。经过几次再次运行后，我仍然坚持，希望能对我的问题得到一些好的解释。

            <div class="navbar">
                <ul>
                    <li>
                    <div><a href="3d.html">3D Printing</a></div>
                        <ul>
                            <li>
                            <div><a href="#">blah</a></div>
                            </li><li>
                            <div><a href="#">blah</a></div>
                            </li><li>
                            <div><a href="#">blah</a></div>
                            </li>
                        </ul>
                    <li>
                    <div><a href="#"></a></div>
                    </li><li>
                    <a href="#"></a>
                    </li>
                </ul>
            </div>

所以这就是我认为HTML没有错。

    .navbar ul {
    position: relative;
    display: inline-block;
    font-family: lemon;
    list-style: none;
    padding: 15px 0px;
    font-size: 210%;
    margin-left: 3%;
    }

    .navbar ul:after {
    content: "";
    clear: both;
    display: block;
    }

    .navbar ul li {
    display: block;
    }

    .navbar ul ul {
    display: none;
    font-size: 100%;
    padding: 18px 5px;
    }

    navbar ul li:hover ul  {
    display: block;
    }

    .navbar ul ul li {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .navbar ul ul li:hover {
    background: rgba(0,0,0,0.4)
    }

    .navbar ul li a {
    display: block;
    text-decoration: none;
    color: white;
    opacity: 0.8;
    }

    .navbar ul li a:hover {
    opacity: 1;
    }

问题出在这里的某个地方，但我无法找到它，非常感谢您的帮助！

提前致谢并致以诚挚的问候。

雷蒙德之锤

Answer 1

请试试这个：

<div class="navbar">
            <ul>
                <li>
               <a href="3d.html">3D Printing</a>
                    <ul>

                        <li><a href="#">blah</a></li>

                        <li><a href="#">blah</a></li>

                        <li><a href="#">blah</a></li>

                    </ul>
                    </li>

            </ul>
        </div>

CSS：

   .navbar ul {
    position: relative;
    display: inline-block;
    font-family: lemon;
    list-style: none;
    padding: 15px 0px;
    font-size: 210%;
    margin-left: 3%;
    }

    .navbar ul:after {
    content: "";
    clear: both;
    display: block;
    }

    .navbar ul li {
    display: block;
    }

    .navbar ul ul {
    display: none;
    font-size: 100%;
    padding: 18px 5px;
    }

    .navbar ul li:hover ul  {
    display: block;
    }

    .navbar ul ul li {
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .navbar ul ul li:hover {
    background: rgba(0,0,0,0.4)
    }

    .navbar ul li a {
    display: block;
    text-decoration: none;
    color: black;
    opacity: 0.8;
    }

    .navbar ul li a:hover {
    opacity: 1;
    }

Answer 2

navbar ul li:hover ul  {
display: block;
}

您错过了dot导航栏class

.navbar ul li:hover ul  {
display: block;
}

jsFiddle

请注意，请勿在{{1}}标记内使用div！

下拉列表没有显示，我做错了什么

2 个答案: