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

垂直下拉菜单不显示在父li旁边

1 个答案: