Question

所以，我对HTML和CSS比较陌生，而且我已经研究过为什么我的导航栏没有多次工作，但我似乎永远无法让它工作。基本上，当我将鼠标悬停在它们上面时，项目不会下降，如果我更改display：none;显示：块;它们也没有出现在项目下面 - 它们只是下拉到下一行并显示为内联。我非常感谢一些建设性的批评，所以我可以学习并继续发展。提前谢谢！

    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的孩子。也不需要，因为.dropdown是a，子菜单有a，你不能拥有a中的a。将其放在.dropdown旁边，并在父:hover上触发li。

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

您可能希望在子菜单上使用absolute定位，以便在显示父元素或整体标题时不会影响它。这也需要将position: relative添加到父li，以便正确定位。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的dropdown课程不会涵盖dropdown-content，您还必须position:absolute提交dropdown-content。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将此添加到您的代码中

.dropdown{
   position:relative;
}

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

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

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

3 个答案: