1

Знаю, что, наверное, с тем количеством вопросов, которые я уже задал на эту тему (коих три), можно ужу было разобраться со всем этим, но я упорно стараюсь и так же упорно не понимаю что к чему и что вызывает эти "ошибки". Прикрепил ссылку на код: https://jsfiddle.net/RobinGold/cntagwos/6/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--    <H1>ШАПОГ</H1>-->
      <header>
       <nav id="menu">
           <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Смотреть</a></li>
                    <ul class="dropmenu">
                        <li><a href="#">Фильмы</a></li>
                        <li><a href="#">Сериалы</a></li>
                        <li><a href="#">Мультфильмы</a></li>
                    </ul>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
                    <ul class="dropmenu">
                        <li><a href="#">Илья</a></li>
                        <li><a href="#">Артем</a></li>
                        <li><a href="#">Женя</a></li>
                    </ul>
            </ul>
        </nav>
    </header>
    <div>
        <article>

        </article>
    </div>
    <footer>

    </footer>
</body>
</html>

#menu{
    height: 50px;
    width: 100%;
}

#menu ul li {
    float: left;
    position: relative;
}

#menu ul .dropmenu li{
    float: none;
}

#menu ul li a{
    color: #243434;
    padding: 0 10px;
    text-decoration: none;
    font-family: cursive;
    display: block;
    line-height: 50px;
    height: 50px;
    font-size: 20px;

}

#menu ul li a:hover{
    background: #120c0c;
    color: aliceblue;
}

#menu .dropmenu{
    position: absolute;
    width: 160px;
    display: none;

}

#menu li:hover .dropmenu{
    display: block;
}

1 ответ 1

0

У вас в куске

#menu li:hover .dropmenu {
  display: block;
}

Предпологается, что .dropmenu находится внутри li. В html коде это не так. Вот так верно:

#menu {
    height: 50px;
    width: 100%;
}

#menu ul li {
    float: left;
    position: relative;
}

#menu ul .dropmenu li {
    float: none;
}

#menu ul li a {
    color: #243434;
    padding: 0 10px;
    text-decoration: none;
    font-family: cursive;
    display: block;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
}

#menu ul li a:hover {
    background: #120c0c;
    color: aliceblue;
}

#menu .dropmenu {
    position: relative;
    width: 160px;
    display: none;
}

#menu li:hover .dropmenu {
    display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--    <H1>ШАПОГ</H1>-->
      <header>
       <nav id="menu">
           <ul>
                <li><a href="#">Главная</a></li>

                <li><a href="#">Смотреть</a>
                    <ul class="dropmenu">
                        <li><a href="#">Фильмы</a></li>
                        <li><a href="#">Сериалы</a></li>
                        <li><a href="#">Мультфильмы</a></li>
                    </ul>
                </li>
                
                <li><a href="#">О нас</a></li>

                <li><a href="#">Контакты</a>
                    <ul class="dropmenu">
                        <li><a href="#">Илья</a></li>
                        <li><a href="#">Артем</a></li>
                        <li><a href="#">Женя</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <div>
        <article>
            
        </article>
    </div>
    <footer>
        
    </footer>
</body>
</html>

1
  • совсем глаза замылились, спасибо большое 7 июн 2019 в 15:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.