Почему не работает выпадающее меню на кнопке?

192

24 июля 2019, 00:40

https://jsfiddle.net/ofmzh2u5/ - код

HTML -

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ГИП - Городской информационный портал</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <div class="header">
        <div class="header-menu">
            <div class="header-menu-content">
                <p class="logo">
                    Гип
                </p>
                <ul class="menu">
                    <li><a href="#">Пункт</a></li>
                    <li><a href="#">Пункт</a></li>
                    <li><a href="#">Пункт</a></li>
                    <li><a href="#">Пункт</a></li>
                    <li><a href="#">Пункт</a></li>
                </ul>
            </div>
        </div>
        <div class="header-content">
            <img src="logo.png">
            <p class="one-text">Городской информационный портал</p>
            <p class="two-text">Недвижимость горячий ключ</p>
            <div class="buttons">
                <div class="buttonsm1">
                    <div class="button"><a href="#">Коммерческая</a></div>
                    <ul class="menu2">
                        <li class="punkt1">Пункт</li>
                        <li>Пункт</li>
                        <li>Пункт</li>
                        <li>Пункт</li>
                        <li>Пункт</li>
                        <li>Пункт</li>
                    </ul>
                </div>
                <div class="button"><a href="#">Жилая</a></div>
            </div>
        </div>
    </div>
    <div class="about-city">
        <div class="about-city-content">
            <p>О Горячем Ключе</p>
            <img src="video.png">
        </div>
    </div>
    <div class="main-uslugi">
        <p>Наши услуги</p>
        <div class="main-content">
            <div class="uslugi">
                <div class="usluga">
                    <p class="uslugi-main">1. Работа с материнским капиталом.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
                <img src="icon1.png">
            </div>
            <div class="uslugi">
                <img src="icon2.png">
                <div class="usluga right">
                    <p class="uslugi-main">2. Помощь с оформлением кредита.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
            <div class="uslugi">
                <div class="usluga">
                    <p class="uslugi-main">3. Помощь в оформлении ипотеки.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
                <img src="icon3.png">
            </div>
            <div class="uslugi">
                <img src="icon4.png">
                <div class="usluga right">
                    <p class="uslugi-main">4. Юридическое сопровождение с момента соверешения сделки.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
            <div class="uslugi">
                <div class="usluga">
                    <p class="uslugi-main">5. Бонус к каждой сделке.</p>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
                <img src="icon5.png">
            </div>
        </div>
    </div>
    <div class="botto"></div>
</body>
</html>

CSS -

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 100vh;
    text-transform: uppercase;
}
.header-menu{
    background-color: #424242;
    width: 100%;
    height: 78px;
    border-bottom: 4px solid #212121;
}
.header-menu-content{
    width: 1024px;
    height: 78px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo{
    font-size: 48px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
.menu{
    list-style-type: none;
}
.menu > li{
    display: inline;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-right: 10px;
}
.menu > li:last-child{
    margin-right: 0px;
}
.menu > li > a{
    text-decoration: none;
    color: #ffffff;
}

.header-content{
    width: 1024px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header-content > img{
    margin-top: 60px;
}
.one-text{
    margin-top: 60px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 36px;
}
.two-text{
    margin-top: 30px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}
.buttons{
    width: 960px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}
.button{
    height: 82px;
    width: 280px;
    background-color: #424242;
    color: #ffffff;
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button > a{
    text-decoration: none;
    color: #ffffff;
}

.about-city{
    width: 100%;
    background-color: #424242;
}
.about-city-content{
    width: 1024px;
    margin: auto;
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-city-content > p{
    margin-top: 40px;
    margin-bottom: 40px;
}
.about-city-content > img{
    margin-bottom: 40px;
}
.main-uslugi{
    width: 100%;
}
.main-content{
    width: 1024px;
    margin: auto;
}
.uslugi{
    display: flex;
    width: 1024px;
    justify-content: space-between;
    margin-bottom: 30px;
}
.uslugi-main{
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #424242;
}
.usluga > p{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #424242;
}
.usluga{
    width: 512px;
}
.right{
    text-align: right;
}
.main-uslugi > p{
    font-size: 36px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #424242;
    text-transform: uppercase;
    margin-top: 42px;
    margin-bottom: 42px;
    text-align: center;
}
.buttonsm1 > ul{
    list-style-type: none;
    background-color: #424242;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    border-bottom: 2px solid #212121;
    text-align: center;
    padding: 5px;
    display: none;
}
.punkt1{
    border-top: 2px solid #212121;
}
.button:hover .menu2 > ul > li{
    display: block;
}
.botto{
    width: 100%;
    height: 20px;
    background-color: #424242;
}

Выпадающее меню находится в блоке с классом buttonsm1