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

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 的位置值从 relative 改写为 static，例如:

#menu li ul li {
 position: static;
}

然后你需要给#menu li ul position: relative，比如:

#menu li ul {
 position: relative;
}

最后在鼠标悬停时将 position: absolute 赋给子菜单，例如:

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

查看 DEMO HERE .