Question

当鼠标超过列表深层列表显示在页面顶部时出现问题，请帮助我们

这是html代码

<div  id="mymenu" runat="server" >
      <ul class="mainmenu">
      <li><a>WorkFlow</a>
      <ul class="submenu">
      <li><a href="# >Employee Apprisail Report</a></li>
      <li><a href="#">Attendance Amendment Status Report</a></li>
      <li><a href="#">Employee Requisition Report</a></li>
      <li><a href="#">Employee Clearance Report</a></li>
      <li><a href="#">Employee Hiring Status Report</a></li>
      <li><a href="#">Housing Loan Status Report</a></li>
      <li><a href="#">Leave Request Annulal Leave Amendments</a></li>
      <li><a href="#">Leave Request Annulal Leave Cancellation</a></li>
      <li><a href="#">Mobile Allowance Status Report</a></li>
      <li><a href="#">Overtime Status Report</a></li>
      </ul>
      </li>
       <li><a>HR</a>
       <ul class="submenu">
       <li><a href="#">Iqama Report</a></li>
       <li><a href="#>Project Time Attendance System</a></li>
       <li><a href="#”>Vacation Balance Report</a></li>
       <li><a href="#">Electronic Human Resource Mangment System</a></li>
       </ul>
       </li>
        <li><a>Payroll</a>
        <ul class="submenu">
        <li><a href="#">Manual Attendance System/User Register</a></li>
        <li><a href="#">Manual Attendance System Approve/Reject</a></li>
        <li><a href="#">Check Print/Report</a></li>
        <li><a href="#">Head Of Departmens Attendance Amendment</a></li>
        <li><a href=”#">Overtime Payroll Application</a></li>
        <li><a href="#">Salary Increment Status Report</a></li>
        <li><a href="#”>Payroll Reconciliation Report</a></li>
        </ul>
        </li>
      </ul>
    </div>

这是我的css（问题）

ul.mainmenu:
{
 list-style:none;
}

ul.mainmenu li
 {
    display: inline-block;
}

ul.mainmenu li a {
    text-decoration: none;
    background: #ff005a;
    color: #fff;
    padding: 0.25em;
}

ul.mainmenu li a:hover {
    background: #ff00ff;
}

ul.mainmenu li ul.submenu {
    list-style: none;
    display: none;
}

ul.mainmenu li:hover > ul.submenu {
    position: absolute;
    display: inline-block;
    top: 40px;
}

Answer 1

使用position: absolute定位的任何元素相对于其第一个父元素定位，其position属性设置为static以外的任何值（默认值），或者，在这种情况下没有具有非static位置的元素，它将相对于body元素定位。

要解决此问题，只需将position: relative分配给父元素，例如li：

ul.mainmenu li {
    position: relative;
    display: inline-block;
}

只需使用top和left来正确定位“下拉菜单”。

如何在鼠标悬停中修复链接的位置

1 个答案: