下拉菜单不下拉答案

【问题标题】：Dropdown menu does not drop-down下拉菜单不下拉
【发布时间】：2020-05-07 18:09:33
【问题描述】：

我正在为一家非营利公司建立一个网站，我需要一个下拉菜单。

我在 youtube 上找到了这个 tut

“https://www.youtube.com/watch?v=wHFflWvii3M”

据我所见，我ḿ 做的一切都是应该做的。但不知何故，菜单不会像下拉菜单那样做出反应。出了什么问题？

这是我的html的副本

<!DOCTYPE html>

<html>

    <head>

        <title>dropdown </title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="menu-bar">
        <ul>
            <li class="active"><a href="#">Home<a></li>
                <div class="sub-menu-1">
                    <ul>
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                        <li><a href="#">sub4</a></li>
                        <li><a href="#">sub5</a></li>
                        <li><a href="#">sub6</a></li>
                        <li><a href="#">sub7</a></li>
                     </ul>


                </div>
            <li><a href="#">Nieuws</a></li>

            <li><a href="#">de Klomp</a></li>
            <li><a href="#">de Werkplaats</a></li>
            <li><a href="#">Activiteiten</a></li>
            <li><a href="#">Agenda</a></li>
            <li><a href="#">Archief</a></li>
            <li><a href="#">Contact</a></li>


        </ul>
        </div>
        </body>



    </body>
</html>

这里是我的css代码//


*
{

    padding: 0;
    margin: 0;
}
body
{

    background-image: url(deKlomp.jpg);
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    font-family: sans-serif;

}
.menu-bar
{

    background: rgb(0,100,0);
    text-align: center;
}
.menu-bar ul
{
    display: inline-flex;
    list-style: none;
    color:#fff

}
.menu-bar ul li
{
    widows: 120px;
    margin: 15px;
    padding: 12px;


}
.menu-bar ul li a
{
    text-decoration: none;
    color:#fff;

}
.active, .menu-bar ul li:hover
{
    background: #2bab0b;
    border-radius:3px;

}
.menu-bar .fa
{
    margin-right: 8px;
}
.sub-menu-1
{
    display:none;
}
.menu-bar ul li:hover .sub-menu-1
{
    display: block;
    position: absolute;
    background: rgb(0,100,0);
    margin-top: 15px;
    margin-left: -15px;

}

【问题讨论】：

标签： html css web-site-project

【解决方案1】：

您的代码与本视频教程中的代码不完全相同；)
第一：你有两次 /body
第二：“li”关闭应该在你的子菜单div之后，而不是在

 <li class="active"><a href="#">Home<a>

都在这里：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>dropdown </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="menu-bar">
        <ul>
            <li class="active"><a href="#">Home<a>
                        <div class="sub-menu-1">
                            <ul>
                                <li><a href="#">sub1</a></li>
                                <li><a href="#">sub2</a></li>
                                <li><a href="#">sub3</a></li>
                                <li><a href="#">sub4</a></li>
                                <li><a href="#">sub5</a></li>
                                <li><a href="#">sub6</a></li>
                                <li><a href="#">sub7</a></li>
                            </ul>
                        </div>
            </li>
            <li><a href="#">Nieuws</a></li>

            <li><a href="#">de Klomp</a></li>
            <li><a href="#">de Werkplaats</a></li>
            <li><a href="#">Activiteiten</a></li>
            <li><a href="#">Agenda</a></li>
            <li><a href="#">Archief</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>

</html>

【讨论】：

【解决方案2】：

*{

    padding: 0;
    margin: 0;
}
body{
    background-image: url("https://homepages.cae.wisc.edu/~ece533/images/watch.png");
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    font-family: sans-serif;
}
.menu-bar{
    background: #005400;
    width:100%;
    padding:20px;
}

.menu-bar > ul{
    width:85%;
    margin:auto;
    display: flex;
    justify-content:space-around;
}
.menu-bar ul li{
    list-style: none;
}

.menu-bar > ul > li a{
    padding: 10px 20px 10px 20px;
    color:#ffffff;
    text-decoration:none;
    
}

.sub_menu{
     display:none;
} 

.menu-bar ul li ul.sub_menu li{
     padding:20px;
     width:100px;
}

.menu-bar ul li:hover > ul.sub_menu{
      display: block;
      position:absolute;
      background:#005400;
      margin-top:20px;
}

.menu-bar ul li a:hover{
    background:#2BAB0B;
    padding: 10px 20px 10px 20px;
    border-radius:5px;
}

  <div class="menu-bar">
    <ul>
      <li class="active"><a href="#">Home</a>
        <ul class="sub_menu">
          <li><a href="#">sub1</a></li>
          <li><a href="#">sub2</a></li>
          <li><a href="#">sub3</a></li>
        </ul>
      </li>
      <li><a href="#">News</a>
        <ul class="sub_menu">
          <li><a href="#">News1</a></li>
          <li><a href="#">News2</a></li>
          <li><a href="#">News3</a></li>
        </ul>
      </li>
      <li><a href="#">Agenda</a></li>
      <li><a href="#">Archief</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

【讨论】：

天啊！！！ 10 次中有 9 次发生这样的问题它是小事.. 就像现在一样.. 我真的没有看到。哈哈.. 谢谢！