CSS 无法在悬停期间根据需要定位菜单 block

Question

我的左侧 block 包含一个垂直菜单以及上方和下方的其他元素。主菜单项可见。当鼠标悬停在主菜单项上时，我希望二级菜单 block 变得可见并移动(向下和向右)。所有这些都应该可以使用 CSS 实现。

当我将样式设置为 position: absolute 时，二级菜单都显示在相同的位置，而不是在事件链接的垂直下方。

当我将样式设置为 position: relative 时，二级菜单显示在正确的位置，但下方的主菜单向下移动，改变了我左手 block 的大小。

有没有办法在正确的位置覆盖二级菜单 block ？

相关的 CSS 是:

.nav
{
    padding: 0;
    margin: 0;
    border-right: 1px hidden #54879d; 
    z-index: 20;
}

.nav li
{
    height: auto;
    display: block;
    text-align: left;
    list-style: none;  /* Removes the default styling (bullets) for the list */
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:1.00em;
    padding: 0 0 15px 0;
    margin: 0;
}

.nav a
{                           
    border-left: 1px hidden #54879d;
    border-right: 1px hidden #1f5065;
    text-decoration: none;
    color: white;
    display: block;
}

.nav li ul
{
    display: none;  /* Hides the drop-down menu */
    height: auto;                                   
    margin: 0; /* Aligns drop-down box underneath the menu item */
    padding: 1px; /* Aligns drop-down box underneath the menu item */           
}               

.nav li:hover ul
{
    display: block; /* Displays the drop-down box when the menu item is hovered over */
    position: relative; //absolute;
    top: 1em;
    left: 50px;
    background-color: LightSlateGray;
}

.nav li ul li
{
    width: 150px;
}

.nav li ul li a
{
    border-left: 1px hidden #1f5065; 
    border-right: 1px hidden #1f5065; 
    border-top: 1px hidden #74a3b7; 
    border-bottom: 1px hidden #1f5065; 
}

.nav li ul li a:hover   { background-color: rgb(180, 0, 0); }

典型的 HTML 是这样的，但可能有不同数量的内部主菜单项和二级菜单项:

<ul class="nav">
    <li class=" active ">
        <a href="firstpage" id="link">Overview</a>
    </li>
    <li>
        <div class="dropdown inactive " id="itemContainer">
            <a href="secondmenu?3#" id="dropdown" class="dropdown-toggle" data-toggle="dropdown">Terms</a>
            <ul class="dropdown-menu">
                <li>
                    <a href="seondsinglepage" id="link">New Term</a>
                </li>
                <li>
                    <a href="secondmultiplepage" id="link">View Terms</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="dropdown inactive " id="itemContainer">
            <a href="thirdmenu?3#" id="dropdown" class="dropdown-toggle" data-toggle="dropdown">Classes</a>
            <ul class="dropdown-menu">
                <li>
                    <a href="secondsinglepage" id="link">New Class</a>
                </li>
                <li>
                    <a href="secondmultiplepage" id="link">View Classes</a>
                </li>
            </ul>
        </div>
    </li>
    <li><a href="j_spring_security_logout" id="logout_link">Logout</a></li>
</ul>

Answer 1

尝试添加:.nav li {position:relative;}这将为它的子元素设置一个相对位置 - 即您的子菜单。

然后，.nav li:hover ul {position:absolute； z-index:1;}将您的子菜单放在内联布局和 z-index 之外:1 将它放在主菜单的 z-index 之上。