如何解決鏈接的位置在鼠標懸停

Question

有一個problom當鼠標懸停在列表中的深列表顯示在頁面的頂部，請幫我傢伙

下面是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屬性設置爲定位在第一其父元素（problome）除了static（默認值）以外，或者在沒有非static位置的元素的情況下，它將相對於body元素定位。

爲了解決這個問題簡單地分配到position: relative父元素，例如li：

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

而且只需使用top和left適當地定位「下拉」菜單。