@yKKynHuK

Почему псевдокласс :hover не работает именно на элементы списка?

Стоит задача сделать блок, появляющийся при наведении на элемент меню (сделать подменю своеобразное).
Методика понятна, однако, при наведении на элемент меню ничего не происходит.
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 main-menu">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contacts</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Work</a></li>
                        </ul>
                    </div>            
                    <!-- /.col-md-12 -->
                    <div class="col-md-12 sub-menu">
                        <h1>Hidden</h1>
                    </div>
                    <!-- /.col-md-12 sub-menu -->
                </div>
            </div>
        </header>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>   
    </body>
</html>


.main-menu {
    background-color: #363636;
    color: #fff;
    width: 100%;
    height: 50px;
    padding-top: 10px;
}

.container .row .main-menu ul li {
    list-style: none;
    display: inline;
    margin-right: 100px;
}

.container .row .main-menu ul {
    text-align: center;
}


.sub-menu {
    height: 200px;
    background-color: #555555;
    color: #fff;
    opacity: 0;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.main-menu ul li:hover+ .sub-menu {
    opacity: 1;
}

При этом если применить :hover к самому блоку .main-menu, то скрытый блок появляется, а с li никак не выходит.
  • Вопрос задан
  • 880 просмотров
Решения вопроса 1
lamer350
@lamer350
กำลังสูงสุด
Элемент .sub-menu должен быть внутри родительского li чтобы это работало чисто на css.
Ну и соотвесвенно в CSS .main-menu ul li:hover+ .sub-menu - убрать +
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы