0

我最近提交了另一个问题，在创建类似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>

这当然需要样式，但我的主要观点是，当将鼠标悬停在菜单项上时，它似乎将以下项目移动了过来。我怎样才能让它不移动以下菜单项？我的意思的一个例子可以在这个链接中找到。

提前致谢，

斯科特

4

1 回答 1

0

只需添加一个position: absolute到您的子菜单项。

http://jsfiddle.net/hA4RE/

于 2012-07-28T04:22:19.227 回答