0

将鼠标悬停在页面顶部显示深度列表时出现问题，请帮助我

这是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="#”&gt;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="#”&gt;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;
}
4

1 回答 1

0

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

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

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

并且只需使用top和left适当地定位“下拉”菜单。

于 2012-09-02T10:25:49.823 回答