Блог

Главная - Вопросы по программированию - Вертикальное выпадающее меню не отображается рядом с родительским li

Вертикальное выпадающее меню не отображается рядом с родительским li

#html #css #drop-down-menu #html-lists

#HTML #css #выпадающее меню #html-списки

Вопрос:

Я пытаюсь создать вертикальное выпадающее меню. При наведении курсора мыши на элемент li отобразите выпадающее меню непосредственно рядом с элементом li (справа).

Это мой текущий CSS:

 div.menu div.navigation ul {
    width: 100%;
    position: relative;
    display: inline-table;
}

div.menu div.navigation ul:after {
    content: "";
    clear: both;
    display: block;
}

div.menu div.navigation ul ul {
    display: none;
    position: absolute;
    left: 300px;
    top: 0;
}

div.menu div.navigation ul ul li {
    background: #1b2133;
}

div.menu div.navigation ul li:hover > ul {
    display: block;
}

div.menu div.navigation ul li a {
    color: #e4ebf7;
    text-decoration: none;
    font-size: 16px;
    padding: 18px 30px;
    display: block;
}

div.menu div.navigation ul li a:hover {
    background: #0c1224;
}

div.menu div.navigation ul li a i {
    margin-right: 5px;
}

div.right-container {
    height: 100%;
    width: calc(100% - 300px);
    position: relative;
    top: 0;
    left: 300px;
    display: table;
}

Однако всякий раз, когда я навожу курсор на элемент, выпадающее меню отображается в верхней части меню навигации:
Снимок экрана выпадающего меню

Я попытался установить значение top: 0; но затем выпадающее меню появляется на 1 li ниже родительского li.

Приветствия!

РЕДАКТИРОВАТЬ: В соответствии с запросом, вот HTML-код, который я использую (очевидно, что это все еще продолжается).

 <div class="navigation">
            <ul>
                <li><a href="<?php echo get_admin_url(); ?>"><i class="fa fa-home" aria-hidden="true"></i>Dashboard</a>
                    <ul>
                        <li><a href="<?php echo get_admin_url(); ?>upgrade.php">Updates</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Media Library</a>
                    <ul>
                        <li><a href="#">Media Library</a></li>
                        <li><a href="#">Upload</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>Users</a>
                    <ul>
                        <li><a href="#">All Users</a></li>
                        <li><a href="#">Your Profile</a></li>
                        <li><a href="#">Create New Profile</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i>Appearance</a>
                    <ul>
                        <li><a href="#">Themes</a></li>
                        <li><a href="#">Widgets</a></li>
                        <li><a href="#">Menus</a></li>
                        <li><a href="#">Theme Editor</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i>Plugins</a>
                    <ul>
                        <li><a href="#">Installed Plugins</a></li>
                        <li><a href="#">Install A Plugin</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                    <ul>
                        <li><a href="#">General</a></li>
                        <li><a href="#">Reading</a></li>
                        <li><a href="#">Media</a></li>
                        <li><a href="#">Permalinks</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right-container">
            <p>Hi</p>
        </div>

Комментарии:

1. Было бы хорошо, если бы вы могли опубликовать HTML этого кода. Это облегчило бы помощь. Спасибо! 🙂

2. Абсолютное позиционирование принимает ближайшего позиционированного предка в качестве точки отсчета. В вашем коде это, похоже, внешний UL. Если вы хотите, чтобы родительский LI был точкой отсчета, то вам нужно расположить его, по крайней мере, относительно.

Ответ №1:

Я написал свой собственный css, используя ваш HTML. Может быть, это может помочь.

В нем есть то же самое, что вы хотите.

HTML: 

 <div class="navigation">
        <ul>
            <li><a href="<?php echo get_admin_url(); ?>"><i class="fa fa-home" aria-hidden="true"></i>Dashboard</a>
                <ul>
                    <li><a href="<?php echo get_admin_url(); ?>upgrade.php">Updates</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>Media Library</a>
                <ul>
                    <li><a href="#">Media Library</a></li>
                    <li><a href="#">Upload</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>Users</a>
                <ul>
                    <li><a href="#">All Users</a></li>
                    <li><a href="#">Your Profile</a></li>
                    <li><a href="#">Create New Profile</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i>Appearance</a>
                <ul>
                    <li><a href="#">Themes</a></li>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Menus</a></li>
                    <li><a href="#">Theme Editor</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-plug" aria-hidden="true"></i>Plugins</a>
                <ul>
                    <li><a href="#">Installed Plugins</a></li>
                    <li><a href="#">Install A Plugin</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                <ul>
                    <li><a href="#">General</a></li>
                    <li><a href="#">Reading</a></li>
                    <li><a href="#">Media</a></li>
                    <li><a href="#">Permalinks</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS:

 body {
            margin: 0;
            padding: 0;
        }
        .navigation ul {
            list-style: none;
            margin: 0;
        }
        .navigation ul li {
            position: relative;
            padding: 15px;
            background-color: #0c1224;
            width: 200px;
        }
        .navigation ul ul {
            visibility: hidden;
            position: absolute;
            left: 82%;
            top: -2%;
        }
        .navigation ul li:hover > ul {
            visibility: visible;
        }
        .navigation ul li:hover {
            background-color: #1b2133;
            cursor: pointer;
        }
        .navigation ul li a {
            text-decoration: none;
            color: #FFF;
        }