为什么我的导航栏不工作？

Question

所以，我对 HTML 和 CSS 比较陌生，我已经研究了为什么我的导航栏多次不起作用，但我似乎永远无法理解上班。本质上，当我将鼠标悬停在它们上面时，这些项目不会下降，如果我更改显示：none;至 display:block；它们也不会出现在项目下方 - 它们只是下降到下一行并显示为内联。我非常感谢一些建设性的批评，这样我就可以学习并继续发展。提前谢谢！

    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>

Answer 1

.dropdown:hover .dropdown-content 将不起作用，因为 .dropdown-content 不是 .dropdown 的 child。也不需要，因为 .dropdown 是 a 而 sub-menus 有 a，而你不能有 a在 a 中。将它放在 .dropdown 附近并在 parent li.

上触发 :hover

链接显示内联的原因是因为您将所有 li 设置为 inline-block。我将其更新为 ul:not(.dropdown-content) li.

您可能想在 sub-menu 上使用 absolute 定位，这样它在显示时不会影响 parent 元素或整体 header。这还需要将 position: relative 添加到 parent li 以便正确定位。

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>

Answer 2

您的 dropdown class 不涵盖 dropdown-content 您还必须将 position:absolute 提供给您的 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>

Answer 3

将此添加到您的代码中

.dropdown{
   position:relative;
}

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

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

为什么我的导航栏不工作？

Why isn't my nav bar working?

html

css

hover

uinavigationbar

nav