垂直下拉菜单未出现在父 li 旁边

Question

我正在尝试制作一个垂直下拉菜单。当 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;但随后下拉菜单出现在父 li 下方 1 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>

Answer 1

我使用您的 HTML 编写了自己的 CSS。可能这会有所帮助。

它有你想要的完全相同的东西。

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;
        }