Question

我正在尝试制作一个三层CSS样式菜单。

我需要完成的是让菜单的第三层与父菜单保持一致。将鼠标悬停在菜单项A上时，菜单B会下拉。当您将鼠标悬停在下拉列表中的菜单项上时，它们会显示菜单B右侧的第三个下拉列表。

现在，悬停的第三个菜单（产品）浮动到左侧，它应该在初始菜单项下面。

     <div class="full_width">
                <div class="wrapper">
                    <div class="page-wrap">           
                        <ul class="dropdown">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">PRODUCTS</a>
                                <ul class="sub_menu">
                                    <li>
                                        <a href="#">Compliment Containers<span class="span_right">&raquo;</span></a>
                                         <ul class="test">
                                            <div class="menu_level3_01">
                                                <span><a href="#">Wastebaskets</a></span>
                                                <span><a href="#">Compost</a></span>
                                                <span><a href="#">Curbside</a></span>
                                                <span><a href="#">Deskside Recycling</a></span>
                                            </div>
                                            <div class="menu_level3_02">
                                                <span><a href="#">Large Trash Collection</a></span>
                                                <span><a href="#">Large Reycling Collection</a></span>
                                                <span><a href="#">Waste Streaming Containers</a></span>
                                            </div>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                                                            <li><a href="#">PRODUCTS</a>
                                <ul class="sub_menu">
                                    <li>
                                        <a href="#">Compliment Containers<span class="span_right">&raquo;</span></a>
                                         <ul class="test">
                                            <div class="menu_level3_01">
                                                <span><a href="#">Wastebaskets</a></span>
                                                <span><a href="#">Compost</a></span>
                                                <span><a href="#">Curbside</a></span>
                                                <span><a href="#">Deskside Recycling</a></span>
                                            </div>
                                            <div class="menu_level3_02">
                                                <span><a href="#">Large Trash Collection</a></span>
                                                <span><a href="#">Large Reycling Collection</a></span>
                                                <span><a href="#">Waste Streaming Containers</a></span>
                                            </div>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

Answer 1

你只需要让第二层相对而离开：0。

    #menu1 ul.menu li ul.sub-menu li ul
{
    position: relative;
    display: none;
    left: 0%;
}

https://jsfiddle.net/kBVYD/34/

Answer 2

我认为这就是你想要的：Fiddle

你需要最后一个menú（“li”）的父亲没有位置相对，所以最后一个菜单绝对位置将不依赖于父亲。

如果您有固定值，则可以很容易地将子菜单设置在您想要的位置，5px顶部（第一个子菜单的边距为主菜单，左侧位置只有一个值，在本例中为180px）。 / p>

基本上我只是把它添加到小提琴中：

.sub-menu > li {position:static !important;}
.sub-menu ul {top:5px !important; left:180px !important; }

编辑：重要的是在小提琴中覆盖你的css。您可以更好地实现其他人为其提供更清晰的CSS表格的属性。

三层CSS菜单

2 个答案: