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

【问题标题】：allign the hover list menu starting from top list item height从顶部列表项高度开始对齐悬停列表菜单
【发布时间】：2014-01-30 17:45:28
【问题描述】：

在我当前的下拉菜单中，我有一个包含 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/

【问题讨论】：

标签： html css menu

【解决方案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。

【讨论】：

顶部？不是临时解决方案，它可能无法在其他机器上运行
它相对于#menu li ul。所以它不会在其他地方受到干扰。
不，它没有，它与#menu li ul 无关，请在html文件中重新生成以确认
是的，我现在确认了。检查它HERE 作为 html 文件。

【解决方案2】：

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

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

【讨论】：

我认为这是一个临时解决方案

【解决方案3】：

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

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

【讨论】：

【解决方案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;

}

【讨论】：