HTML/CSS Navigation bar dropdown doesn't display in a list format

Question

http://codepen.io/josterberg/pen/LxEZMy

<header>
        <nav>
            <ul class="nav" id="navigationBar">
                <li class="nav-item-align-left"><a class="active" href="index.html">Home</a></li>
                <li class="nav-item-align-left"><a class="active" href="page2.html">Page 2</a></li>
                <li class="nav-item-align-left"><a class="active" href="page3.html">Page 3</a></li>
                <li class="nav-item-align-left dropdown">
                    <a class="dropbtn">Account</a>
                    <div class="dropdown-content">
                        <a href="#">Settings</a>
                        <a href="#">Logout</a>
                    </div>
                </li>
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px;" onclick="toggleResponsiveNav()">☰</a>
                </li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script src="js/all.js"></script>
            <script src="js/main.js"></script>
        </nav>
    </header>

As you can see, my dropdown for Account isn't going downward-- it's going to the left. What should I modify in my CSS that would change this behavior to make my downdrop go down instead of left?

Answer 1

If you are trying to use bootstrap navbar you need to include the bootstrap js file as well:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

Take a look at this plunker:

http://embed.plnkr.co/kfUPcF/

Answer 2

Okay, I recommend you to change the .dropdown-content to

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #282828;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

If that doesn't work, you can always do <br> or <hr> , but that should work. Remember that some browsers like Chrome, Firefox and Opera require to refresh the CSS code to load updated (or use private navigation) :P

Answer 3

I don't get why you need to use

class = "nav-item-align-left" 

every single time. Just write in your CSS:

li {
  float: left;
}

In ul.nav, delete float: left; So it would look like:

ul.nav {
    width: 100%;
    list-style-type: none;
    margin: 0 0 1em 0;
    padding: 0;
    overflow: hidden;
    background-color: #282828;
}

Delete ul.nav in ul.nav li a, so it would look like

li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    font-family: "SF UI Display Light", serif;
}

Instead of ul.nav li a {...}

Change the color in dropbtn and .dropdown-content to white