Выпадающее меню не раскрывается - PullRequest
Новая
       49

Выпадающее меню не раскрывается

0 голосов
/ 07 мая 2020

Я создаю веб-сайт для некоммерческой компании, и мне нужно раскрывающееся меню в нем.

Я нашел этот урок на 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;

}

Ответы [ 2 ]

0 голосов
/ 07 мая 2020 

*{

    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>
0 голосов
/ 07 мая 2020

Ваш код не совсем такой, как в этом видеоуроке;)
Во-первых: у вас дважды / 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>
...