[Web]经典下拉菜单

qghboy

墨衍会员 · AI 创作全网分发码龄21年

关注

原创最新推荐文章于 2026-02-22 06:12:02 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

用HTML+CSS实现优雅的菜单栏弹出效果模仿腾讯官网菜单栏弹出效果。仅供参考学习，运行效果如下：阅读详情

效果如图：

实现代码如下：

<! 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 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;" >