Question

我的左侧区块包含垂直菜单以及上方和下方的其他项目。主菜单项可见。我想要一块辅助菜单变为可见，并在将鼠标悬停在主菜单项上时向下移动（向下和向右）。所有这一切都应该可以通过CSS实现。

当我将样式设置为position: absolute时，辅助菜单全部显示在相同位置，而不是垂直位于活动链接下方。

当我将样式设置为position: relative时，辅助菜单会显示在正确的位置，但是较低的主菜单会向下移动，从而更改左侧块的大小。

有没有办法将辅助菜单块叠加在正确的位置？

相关的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之上。

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

1 个答案: