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た最初の親要素に対して相対的に配置されます。非位置を持つ要素がない場合は、要素に対して相対的に配置されます。positionstaticstaticbody

それを修正するには、単にposition: relative親要素に割り当てliます。

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

と を使用topしleftて、「ドロップダウン」メニューを適切に配置します。

于 2012-09-02T10:25:49.823 に答える