html - CSS 下拉菜单 - 列表元素是静态的

Question

我的编码方式可能看起来真的很愚蠢或完全错误。但是，当我在 CSS 中创建下拉菜单时，新的 li 元素会被推到页面的另一侧，而不是容器框中。我该如何解决这个问题？

代码如下:

<nav>
    <div class="wrapper">
        <div class="brand">
            <a href="index.html"><img class="UKLogo" src="images/logo.png" alt=""></a>
        </div> <!-- brand -->

        <div class="navigation">
            <ul class="nav-ul">
                <a href="index.html"><li> HOME </li></a>
                <a href="about.html"><li> ABOUT </li></a>
                <a href="#">
                <li class="course-li"> 
                    COURSES 
                        <ul class="drop-down">
                            <li class="list-item"> Driver CPC </li>
                            <li> First Aid </li>
                            <li> Other </li>
                        </ul>
                </li>
                <a href="contact.html"><li> CONTACT </li></a>
                <!-- <a href="#"><li> TESTOMONIALS </li></a> -->
                <!-- <a href="#"><li> FAQs </li></a> -->
            </ul> 
        </div> <!-- Navigation -->
    </div> <!-- Wrapper --> 
</nav>



        nav {
            margin: 0px;
            padding: 0px;
            height: 75px;
            background-color: #FFF;
        }

        .brand {
            margin: auto;
            width: 960px;
        }

        .company-name {
            padding: 0px;
            margin: 0px;
        }

        .UKLogo {
            padding: 0px;
            margin: 0px;
            position: relative;
            top: 11px;
        }

        .navigation ul li {
            display: inline-block;
            margin: 10px;
            position: relative;
            left: 380px;
            top: -46px;
        }

        .navigation ul a {
            color: black;
            margin-left: 40px;
            text-decoration: none;
            font-family: Lato;
            font-weight: 300;
        }

        .navigation ul a:hover {
            color: #169ec5;
            font-weight: 300;
        }

        .course-li:hover .drop-down {
            left: 0px;
        }

        .drop-down {
            position: absolute;
            left: -5px;
            z-index: 1;

            background-color: white;    
            left: -9999px;
        }

非常感谢您的关注和帮助。无论是我的编码方式还是其他任何方式，总是对批评持开放态度。

这是一个 JSFiddle https://jsfiddle.net/vj41qLts/

非常感谢!

Answer 1

您需要在父级中声明一个位置，以便子级驻留在其中。具有 position: absolute; 的元素将自己定位到具有 position: relative;< 的第一个父级。如果没有 position: relative; 的父级，它将使用浏览器窗口。

请参阅此处的修复示例:https://jsfiddle.net/vj41qLts/1/

我认为您需要更改两件事:

1. ul li 将选择导航中的所有 li 甚至下拉列表，ul>li 将仅选择直接子元素，而不是向下运行嵌套元素。
2. 您需要在下拉列表的父项中添加 position:relative;。