Задать вопрос
  • Многоуровневое меню не работает, как пофиксить?

    @Vl0d0 Автор вопроса
    Спасибо, большое! Теперь все работает.
  • Многоуровневое меню не работает, как пофиксить?

    @Vl0d0 Автор вопроса
    HTML
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Горизонтальное многоуровневое меню</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
        <ul id="menu-header" class="menu">
            <li id="menu-item" class="menu-item"><a>Пункт 1</a>
                <ul class="sub-menu">
                    <li id="menu-item" class="menu-item"><a href="#" aria-current="page">Пункт 1.2</a></li>
                </ul>
            </li>
            <li id="menu-item" class="menu-item"><a>Пункт 2</a>
                <ul class="sub-menu">
                    <li id="menu-item" class="menu-item"><a>Пункт 2.1</a>
                        <ul class="sub-menu">
                            <li id="menu-item" class="menu-item"><a>Пункт 2.1.1</a></li>
                            <li id="menu-item" class="menu-item"><a>Пункт 2.1.2</a></li>
                            <li id="menu-item" class="menu-item"><a>Пункт 2.1.3</a></li>
                        </ul>
                    </li>
                    <li id="menu-item" class="menu-item"><a href="#">Пункт 2.2</a>
                        <ul class="sub-menu">
                            <li id="menu-item" class="menu-item"><a>Пункт 2.2.1</a></li>
                            <li id="menu-item" class="menu-item"><a>Пункт 2.2.2</a></li>
                            <li id="menu-item" class="menu-item"><a>Пункт 2.2.3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
    </html>

    CSS
    #menu-header {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #5f727f;
        background: #fff;
        border: 1px solid #dfe5e8;
        width: 300px;
    }
    
    #menu-header a {
        display: block;
        width: 100%;
        padding: 10px;
        color: #5f727f;
        transition: 0.1s all;
    }
    
    #menu-header a:hover {
        color: #fff;
        background: #729fca;
        padding: 10px 0 10px 20px;
        border-left: 3px solid #4179ae;
    }
    
    .sub-menu > .sub-menu {
        color: red;
    }
    
    .sub-menu {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #5f727f;
        background: #f4f6f7;
        border: 1px solid #dfe5e8;
        position: absolute;
        width: 300px;
        left: 300px;
        z-index: 1000;
        opacity: 0;
        top: -9999em;
    }
    .menu-item {
        position: relative;
    }
    
    .menu-item:hover .sub-menu {
        opacity: 1;
        top: 0;
    }