Question

我正在为非营利性公司建立网站，并且需要下拉菜单。

我在youtube上发现了这个问题

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

}

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

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

下拉菜单不下拉

2 个答案: