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 you have read our privacy policy.

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