Question

在我当前的菜单下拉菜单中，我有一个包含5个列表项的子菜单

HTML

<ul id="menu-list">
                <li>Menu Item 1
                <ul class="submenu">
                    <li>sub Menu Item 1</li>
                    <li>sub Menu Item 2</li>
                    <li>sub Menu Item 3</li>
                    <li>sub Menu Item 4</li>
                    </ul>
                </li>

                <li>Menu Item 2
                 <ul class="submenu">
                    <li>sub Menu Item 1</li>
                    <li>sub Menu Item 2</li>
                    <li>sub Menu Item 3</li>
                    <li>sub Menu Item 4</li>
                    </ul>
                </li>
                <li>Menu Item 3</li>
                <li>Menu Item 4</li>
                <li>Menu Item 5</li>
            </ul>

CSS

    #menu-list
{
    background:inherit;

    }
    #menu-list li
    {
        cursor:pointer;
        border: 1px solid black;
         position:fixed;

        }
    #menu-list li:hover 
    {
        cursor:pointer;
        visibility:visible;
        }
    #menu-list .submenu
    {
        position:fixed;
        margin: -25px 0px 0px 100px;
        z-index: 50;
        visibility:hidden;    
            }

      #menu-list li:hover .submenu
    {
        cursor:pointer;
        visibility:visible;
        position:fixed;

        }

我希望子菜单从父菜单的相同高度（顶部）开始，请分享一些提示，谢谢

喜欢，鼠标悬停

list 1 --> sub-1
list 2     sub-2
list 3     sub-3

list 1     sub-1
list 2 --> sub-2
list 3     sub-3

http://jsfiddle.net/2HQze/

Answer 1

在您的情况下，首先您需要从相对静态覆盖#menu li ul li的位置值，例如：

#menu li ul li {
 position: static;
}

然后您需要将position: relative提供给#menu li ul，例如：

#menu li ul {
 position: relative;
}

最后在悬停时将position: absolute提供给子菜单，例如：

#menu-list li:hover .submenu {
 position: absolute;
 top: 25px;
}

查看DEMO HERE。

Answer 2

将top:158px;添加到#menu-list .submenu

http://jsfiddle.net/2HQze/1/

Answer 3

http://jsfiddle.net/2HQze/2/

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:-30px auto;

Answer 4

http://jsfiddle.net/2HQze/3/

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:-7px;
    z-index:10;

}

从顶部列表项高度开始对齐悬停列表菜单

4 个答案: