Question

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

enter image description here

以下是代码：

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

我认为你需要改变两件事：

ul li将选择导航中的所有内容，即使是下拉列表，ul>li也只会选择直接子项，而不是运行嵌套元素。
您需要在下拉列表中添加position:relative;。

Answer 2

我看到的第一个问题是您的主链接的标记未正确设置。在结构更多链接之后，下面应该让它按照你想要的方式工作：

<nav>
     <ul>
         <li><a href="#">Home<a></li>
         <li><a href="#">About<a></li>
         <li>
             <a href="#">Courses<a>
             <div>
                 <ul>
                     <li>A link</li>
                     <li>A link</li>
                 </ul>
             </div>
         </li>
     </ul>
</nav>

然后使用CSS或JS来控制显示和隐藏链接下拉列表。

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

2 个答案: