Question

我最近提交了另一个问题，在创建类似RackSpace的菜单时以及我使用下面的代码时回答了问题：

== CSS ==

    .main > li{
        float: left;
        padding: 5px;
    }


    .sub li {
        height: 30px;
        background-color: black;
        width: 1000px;
        display: none;
    }

    .main > li:hover .sub li {
        display: block;
    }

== HTML ==

    <ul class="main">
    <li>
    Hosting
    <ul class="sub">
    <li>cPanel Hosting Solutions</li>
    <li>cPanel Reseller Solutions</li>
    <li>Plesk Hosting Solutions</li>
    <li>Plesk Reseller Solutions</li>
    </ul>
    </li>
    <li>
    Menu 2
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    <li>
    Menu 3
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    <li>
    Menu 4
    <ul class="sub">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
    </ul>
    </li>
    </ul>

这当然需要造型，但我的主要观点是，当鼠标悬停在菜单项上时，似乎将以下项目移动过来。如何让它不移动以下菜单项？可以找到我的意思的一个例子at this link。

提前致谢，

斯科特

Answer 1

只需在子菜单项中添加position: absolute即可。

http://jsfiddle.net/hA4RE/

菜单项在悬停时移动

1 个答案: