CSS Drop Down Menu - List elements are static

Question

I may seem really silly or outright wrong in the way I code. However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box. How would I fix this?

Here is the code:

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

Thank you ever so much for looking and helping. Always open to criticism whether its the way I code or anything else.

Here is a JSFiddle https://jsfiddle.net/vj41qLts/

Many Thanks!

Answer 1

You need to declare a position in the parent, for the child to reside in. An element with position: absolute; will position itself to the first parent with position: relative; . If there is no parent with position: relative; , it will use the browser window instead.

See fix example here: https://jsfiddle.net/vj41qLts/1/

I think there are two thing you need to change:

1. ul li will select everything li in the navigation even the dropdown, ul>li will only select the immediate child, instead of running down the nested elements.
2. you need to add position:relative; in your dropdown's parent.

Answer 2

One of the first issues I see is the fact that your markup for your main links isn't setup correctly. Following a structure more link the below should give make it work the way you want it to:

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

Then use CSS or JS to control showing and hiding the dropdown of links.