效果如圖：
實現代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>工具條上的彈出式菜單</title>
<style type="text/css">
.MenuItem
{
display:block; width:60px; height:20px; font-size: 12px; float:left; text-align:center; cursor: hand; padding:2px 0px 0px 0px;
}
</style> <script type="text/javascript"> var popup = window.createPopup(); var width; var height; function Pop_menu(divMenuList,width,height,toolbarMenuItem) { popup.document.body.innerHTML = divMenuList.innerHTML; popup.show(0,22,width,height,toolbarMenuItem); // 0 和 23 是相對於toolbarMenuItem元素左上角的座標點(x,y) // width 顯示菜單的寬度 // height 顯示菜單的高度 // toolbarMenuItem 要彈出菜單的對象 } </script></head><body> <!--菜單條--> <div id="toolbar_menu" style="width: 100%; height: 20px; background-color: #ece9d8; border: darkgray 1px solid;"> <!--菜單元素--> <div id="MenuItem1" class="MenuItem" onmousemove="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem1)" onfocus="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem1)" onmouseout="this.style.color='black';this.style.background='#ece9d8'" onfocusout="this.style.color='black';this.style.background='#ece9d8'" accesskey="F">文件(<u>F</u>)</div> <div id="MenuItem2" class="MenuItem" onmousemove="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem2)" onfocus="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem2)" onmouseout="this.style.color='black';this.style.background='#ece9d8'" onfocusout="this.style.color='black';this.style.background='#ece9d8'" accesskey="E">編輯(<u>E</u>)</div> <div id="MenuItem3" class="MenuItem" onmousemove="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem3)" onfocus="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem3)" onmouseout="this.style.color='black';this.style.background='#ece9d8'" onfocusout="this.style.color='black';this.style.background='#ece9d8'" accesskey="V">視圖(<u>V</u>)</div> <div id="MenuItem4" class="MenuItem" onmousemove="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem4)" onfocus="this.style.color='#FFFFFF'; this.style.background='#4169e1';Pop_menu(filMenuList,120,122,MenuItem4)" onmouseout="this.style.color='black';this.style.background='#ece9d8'" onfocusout="this.style.color='black';this.style.background='#ece9d8'" accesskey="S">網站(<u>S</u>)</div> <div style="clear: both;"> </div> </div> <div style="width: 100%; height: 200px; background-color: #cccc99;"></div> <!--文件菜單--> <div id="filMenuList" style="display: none;"> <!--菜單列表元素--> <div style="width: 120px; height: auto; background-color: #eee; border: darkgray 1px solid;"> <div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'"> <span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand; height: 20px; font-size: 12px; padding: 5px;">我的CSDN博客</span> </div> <div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'"> <span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand; height: 20px; font-size: 12px; padding: 5px;">我的CSDN博客</span> </div> <div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'"> <span onclick="parent.location.href='http://blog.csdn.net/qghboy'" style="cursor: hand; height: 20px; font-size: 12px; padding: 5px;">我的CSDN博客</span> </div> <div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'"> <span onclick="parent.location.href='http://hexun.com/qghboy'" style="cursor: hand; height: 20px; font-size: 12px; padding: 5px;">我的和訊博客</span> </div> <div onmousemove="this.style.color='white'; this.style.background='#4169e1';" onmouseout="this.style.color='black';this.style.background='#eee'"> <span onclick="parent.location.href='http://hexun.com/qghboy'" style="cursor: hand; height: 20px; font-size: 12px; padding: 5px;">我的和訊博客</span> </div> </div> </div></body></html>