[Web]经典下拉菜单

效果如图：   实现代码如下： <! 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;" > 我的博客 </ 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;" > 我的博客 </ 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;" > 我的博客 </ 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 >