Why isn't my nav bar working?

Question

So, I'm relatively new to HTML and CSS, and I have researched as to why my nav bar is not working plenty of times, but I can never seem to get it to work. Essentially, the items do not drop down when I hover over them, and if I change display: none; to display:block; they do not appear underneath the item either - they just drop down to the next line and display as inline. I would highly appreciate some constructive criticism so I can learn and continue to develop. Thank you ahead of time!

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    li {
        list-style: none;
        display: inline-block;    
        text-align: left;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    .dropdown:hover .dropdown-content{
        display: block;
    }

        <!DOCTYPE html>
    <html>
    <head>
        <title>Witcher's World</title>
        <link rel="stylesheet" href="witcher.style.css"/>
        <meta charset="UTF-8">
        
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="witcher.index.html">Home</a></li>
                    <li><a href="#">Witcher Lore</a></li>
                    <li><a class="dropdown" href="#">Glossary</a></li> 
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Bestiary</a></li>
                        </ul>
                    <li><a class="dropdown" href="#">Weapons</a></li>
                        <ul class="dropdown-content">
                            <li><a href="#">Swords</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Steel Swords</a></li>
                                    <li><a href="#">Silver Swords</a></li>
                                </ul-->
                            <li><a href="#">Signs</a></li>
                        </ul>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
    </head>
    <body>
        
        <footer>
            
        </footer>
    </body>
    </html>

What do you mean by it is not working? What output do you get? — Bunyamin Coskuner, Jun 24 '17 at 21:54
Sorry about that - the dropdowns do not appear if I hover over them. If I take the display: none; and change it to block; they do not appear underneath the original
See the example of https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button; I think this fulfills your requirements. — jbiWeisendorf, Jun 24 '17 at 22:02
I've been looking at this for a very long time now, but I still couldn't get it to work for me. Thank you for your suggestion, though! — , Jun 24 '17 at 22:03
Why you do not use a framework like bootstrap see https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_dropdown&stacked=h thats it :) — jbiWeisendorf, Jun 24 '17 at 22:13

Michael Coker · Answer 1 · 2017-06-24T22:16:13.220

.dropdown:hover .dropdown-content won't work because .dropdown-content isn't a child of .dropdown. Doesn't need to be, either, because .dropdown is an a and the sub-menus have a's, and you can't have an a in an a. Put it adjacent to .dropdown and trigger :hover on the parent li.

And the reason the links are displaying inline is because you styled all li as inline-block. I updated that to be ul:not(.dropdown-content) li.

And you probably want to use absolute positioning on the sub-menu so it doesn't impact the parent element or overall header when it's displayed. That also requires adding position: relative to the parent li so it's positioned correctly.

html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    ul:not(.dropdown-content) li {
        list-style: none;
        display: inline-block;    
        text-align: left;
        position: relative;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    li:hover .dropdown-content{
        display: block;
        position: absolute;
        left: 0;
    }

<!DOCTYPE html>
    <html>
    <head>
        <title>Witcher's World</title>
        <link rel="stylesheet" href="witcher.style.css"/>
        <meta charset="UTF-8">
      </head>
      <body>
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="witcher.index.html">Home</a></li>
                    <li><a href="#">Witcher Lore</a></li>
                    <li><a class="dropdown" href="#">Glossary</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Bestiary</a></li>
                        </ul></li> 
                    <li><a class="dropdown" href="#">Weapons</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Swords</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Steel Swords</a></li>
                                    <li><a href="#">Silver Swords</a></li>
                                </ul-->
                            <li><a href="#">Signs</a></li>
                        </ul></li>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
        
        <footer>
            
        </footer>
    </body>
    </html>

Bunyamin Coskuner · Accepted Answer · 2017-06-24T22:14:47.987

Your dropdown class does not cover dropdown-content also you have to give position:absolute to your dropdown-content.

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    li {
        list-style: none;
        display: inline-block;    
        text-align: left;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    .dropdown:hover .dropdown-content{
        display: block;
        position: absolute;
    }

        <!DOCTYPE html>
    <html>
    <head>
        <title>Witcher's World</title>
        <link rel="stylesheet" href="witcher.style.css"/>
        <meta charset="UTF-8">
        
        
    </head>
    <body>
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="witcher.index.html">Home</a></li>
                    <li><a href="#">Witcher Lore</a></li>
                    <li class="dropdown"><a  href="#">Glossary</a> 
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Bestiary</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a  href="#">Weapons</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Swords</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Steel Swords</a></li>
                                    <li><a href="#">Silver Swords</a></li>
                                </ul-->
                            <li><a href="#">Signs</a></li>
                        </ul>
                      </li>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
        <footer>
            
        </footer>
    </body>
    </html>

Hi Bunyamin, please add your code to your answer so that people in the future can reference your work in case the plnkr link changes, is unavailable, etc. — Michael Coker, Jun 24 '17 at 22:09
Any particular reason why everybody keeps the
node inside the ? — Gerard, Jun 24 '17 at 22:14
@Gerard Sorry, I was a victim of copy paste. Fixed it. Thanks — Bunyamin Coskuner, Jun 24 '17 at 22:15
Hm. I don't understand. I tried both answers and none are working for me, even when I copy and paste to replace the code. However, when I run the code in plunker, it works just fine. This is in multiple browsers as well. Any ideas? — , Jun 24 '17 at 22:35
I just wrapped your dropdown-content with li tag (having class dropdown), and added position: absolute to your css. — Bunyamin Coskuner, Jun 24 '17 at 22:37
Nevermind, I tried it again and it started working. Don't know why it did that, but ok then. Lol. Thank you! — , Jun 24 '17 at 22:37

score 0 · Answer 3 · answered Jun 24 '17 at 22:15

0

Add this to your code

.dropdown{
   position:relative;
}

.dropdown-content {
    display: none;
    position: absolute;
   top:100%;
}

.dropdown:hover .dropdown-content{
    display: block;
 }

answered Jun 24 '17 at 22:15

niklul

11
1

Why isn't my nav bar working?

3 Answers3