本日志标题：Div+Css(+Js)菜单代码及制作工具

chief1985

关注

原创最新推荐文章于 2026-08-14 11:57:47 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

导读：
　　 效果直逼flash的Div+Css+Js菜单
　　转载自：http://www.dzhai.com/blog/article.asp?id=153
　　< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />< title>css菜单< style> body{ background-color:#B8B8A0;}#fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px;}#fbtn_txt{ position:relative;}#fbtn_txt div{ height:30px; padding-top:11px; font-size:12px; color:#800080; text-align:center; cursor:hand;}#fbtn_mask{ background-color:#ffffff; position:relative; width:100%; height:100%;}< body>< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G1< div>good morning< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G2< div>good evening< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M1< div>my name is fireyy< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M2< div>mm mm i love u< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G1< div>good morning< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G2< div>good evening< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M1< div>my name is fireyy< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M2< div>mm mm i love u< script> var current=null; var t=null; for(var i=0;i 30) m.style.posTop=-30; else m.style.posTop=0;} else{ m.style.posTop+=3; o.style.posTop-=3; setTimeout('domove('+num+')',15);}}
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　 另转：5款纯div+css制作的弹出菜单(标准且无js)
　　来源：http://www.cssplay.co.uk/index.html
　　整理：http://macrolong.com/blog/read.php?210
　　 一、最基本的：二级dropdown弹出菜单
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU< style type="text/css">/* common styling *//* set up the overall width of the menu div, the font and the margins */.menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul { padding:0; margin:0; list-style-type: none;}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li { float:left; position:relative;}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px;}/* make the dropdown ul invisible */.menu ul li ul { display: none;}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a { color:#fff; background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px;}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a { display:block; background:#faeec7; color:#000;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover { background:#dfc184; color:#000;} < body>< div class="menu">< ul>< li> < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> < ul> < li> example one < li> weft fonts < li> vertical align < li> < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < div class="clear">
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　 二、三级dropdown弹出菜单
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>三级dropdown弹出菜单< style type="text/css">/* common styling */.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}.menu ul {padding:0; margin:0;list-style-type: none; }.menu ul li {float:left; margin-right:1px; position:relative;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff; background:#36f;}.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}.menu ul li:hover ul li:hover ul.left {left:-105px;} < body>< div class="menu">< ul>< li> < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> < ul> < li> example one < li> weft fonts < li> vertical align < li> < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < li> < ul class="left"> < li> styled form < li> active focus < li> hover/click
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　 三、flyout-竖向三级弹出菜单
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>flyout-竖向三级弹出菜单< style type="text/css">/* common styling */.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}.menu ul {padding:0; margin:0;list-style-type: none; }.menu ul li {float:left; margin-right:1px; position:relative;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff; background:#36f;}.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} < body>< div class="menu"> < ul> < li> < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> < ul> < li> example one < li> weft fonts < li> vertical align < li> < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　 四、dropline-水平三级横向弹出菜单
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>dropline-水平三级横向弹出菜单< style type="text/css">/* common styling */.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}.menu ul {padding:0; margin:0; list-style-type: none;}.menu ul li {float:left; border-left:1px solid #eee; width:106px;}.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}.menu ul li:hover ul.right li {float:right;}.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} < body>< div class="menu">< ul>< li> < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> < ul class="right_side"> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> < ul class="right_side"> < li> example one < li> weft fonts < li> vertical align < li> < ul class="right_side"> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < li> < ul class="left_side"> < li> styled form < li> active focus < li> hover/click
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　 五、upmenu-水平竖弹向上三级弹出菜单
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>upmenu-水平竖弹向上三级弹出菜单< style type="text/css">/* common styling */.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}.menu ul {padding:0; margin:0;list-style-type: none; }.menu ul li {float:left; position:relative;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:#000; background:#e9e9c7;}.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li:hover ul.left {left:-105px;}.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} < body>< p>

< p>

< div class="menu">< ul>< li> < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> < ul> < li> example one < li> weft fonts < li> vertical align < li> < ul class="left"> < li> < ul class="left"> < li> styled form < li> active focus < li> hover/click < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II
　　[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
　　如果你很厌烦来研究、修改代码，那么这里有款软件制作基于DIV+CSS的各类菜单效果（能整合到DREAMWEAVER中将是件多么让人高兴的事）。
　　
　　软件下载： http://dl.filekicker.com/send/file/175939-ALVX/css_tab.zip
　　该软件介绍： http://www.highdots.com/css-tab-designer/
　　下载地址页面： http://www.highdots.com/download.html
　　tag: css,div,web标准

本文转自
http://www.cnbruce.com/BLOG/showlog.asp?log_id=1086

收录于