24个 HTML5 & CSS3 下拉菜单效果及制作教程

缺乏、安全感 2022-08-07 09:58 173阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">下拉菜单是一个很常见的效果，在<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">网站</a>设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">HTML5</a>&nbsp;和&nbsp;<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=16" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">CSS3</a>&nbsp;可以更容易创造视觉上充满吸引力的下拉菜单。</span> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">A Flash Blue Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/134522rnkhkrn2eknrdnte.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/134522rnkhkrn2eknrdnte.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fcssdeck.com%2Flabs%2Ffull%2Fa-flash-blue-menu&amp;h=1000&amp;c=&amp;n=a-flash-blue-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://cssdeck.com/labs/a-flash-blue-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Fancy Rolling Navigatio</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/134644zbu1y5z5cy0yggy0.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/134644zbu1y5z5cy0yggy0.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fcssdeck.com%2Flabs%2Ffull%2Ffancy-rolling-navigation&amp;h=1000&amp;c=&amp;n=fancy-rolling-navigation" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://cssdeck.com/labs/fancy-rolling-navigation" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Sweet tabbed navigation using CSS3</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/134756ze4ovry29r2yr769.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/134756ze4ovry29r2yr769.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fdemo.marcofolio.net%2Fcss3_tabbed_nav%2F&amp;h=1000&amp;c=&amp;n=" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp; &nbsp; &nbsp;<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14259" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">css3_tabbed_nav.zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">jQuery style menu with CSS3</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/134922o0ostrxbllz0cfxt.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/134922o0ostrxbllz0cfxt.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fdevelopment.tobypitman.com%2Fcss%2Fmenu.html&amp;h=1000&amp;c=&amp;n=css-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://www.tobypitman.com/jquery-style-menu-with-css3/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Fun Animated Navigation Menu With Pure CSS</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/13504590frg8b0n8xu8igr.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/13504590frg8b0n8xu8igr.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fdesignshack.net%2Ftutorialexamples%2FAnimatedMenu%2FanimatedMenu.html&amp;h=1000&amp;c=&amp;n=animatedMenu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">CSS3 Wheel Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/140400imp7i2fyfma02ive.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/140400imp7i2fyfma02ive.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fcdn.tutsplus.com%2Fwebdesign%2Fuploads%2Flegacy%2F155_WheelMenu%2Fnav_wheel-css-only%2Fwheel.htm&amp;h=1000&amp;c=&amp;n=nav_wheel-css-only" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;<span style="word-wrap:break-word">&nbsp;源码下载：</span><a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14264" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">wheeltz-source.zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">The Fanciest Dropdown Menu You Ever Saw</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/140555091hblgzggog1dlh.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/140555091hblgzggog1dlh.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word; line-height:1.8em"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word; line-height:1.8em"><span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">jQuery &amp; CSS Example – Dropdown Menu</span></span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/140747qkq2pt4nq4pszpif.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/140747qkq2pt4nq4pszpif.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Pure CSS3 LavaLamp Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/140841gn9ttppgps9tsp1b.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/140841gn9ttppgps9tsp1b.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/249/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14268" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source.zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">3-Level Navigation Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/1409518598000w0x77kacp.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/1409518598000w0x77kacp.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://cdn.tutsplus.com/net/uploads/legacy/590_menu/menu/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14270" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">menu.zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Musical drop down menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141103purujmpxrp7pm277.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141103purujmpxrp7pm277.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/272/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14272" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (1).zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">CSS3 vertical multicolor 3D menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141241qvtdwvel3r9glg3q.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141241qvtdwvel3r9glg3q.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/244/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14274" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (2).zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Accordian like CSS3 Onclick Vertical Navigation</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141340gkddrk4qne5gkrng.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141340gkddrk4qne5gkrng.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/162/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14276" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (3).zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Simple yet amazing dropdown menu in pure CSS3</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141437vf7knez3fr72veko.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141437vf7knez3fr72veko.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://cssdeck.com/labs/another-simple-css3-dropdown-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://cssdeck.com/labs/another-simple-css3-dropdown-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">源码下载</span></a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Vertical Slide Hover Effect for Menu Bars with CSS3</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141547hknn0he7uwo9h8wm.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141547hknn0he7uwo9h8wm.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.designzzz.com/coding/demos/menu-css3-animated-transition-effect/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://www.designzzz.com/coding/menu-css3-animated-transition-effect/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">源码下载</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">HTML5 Canvas Navigation menu with Fire</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/1417220m0yzf000zsyvz2d.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/1417220m0yzf000zsyvz2d.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/279/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14280" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (4).zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">CSS3 Dropdown Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/141833ckfqlfnf9fx4fffn.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/141833ckfqlfnf9fx4fffn.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://designmodo.com/demo/css3dropdownmenu/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://designmodo.com/css3-dropdown-menu/" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">源码下载</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Pure CSS DropDown Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/1420255ndz25k9aj59zdya.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/1420255ndz25k9aj59zdya.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://deepubalan.com/blog/wp-content/uploads/2011/06/example.html?KeepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=590#b" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14283" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">pure-css-menu.zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Nicer Navigation with CSS Transitions</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/142153a0qwfwrr9asff9qa.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/142153a0qwfwrr9asff9qa.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; color:#0000f0; word-wrap:break-word"><a href="http://www.gethifi.com/blog/nicer-navigation-with-css-transitions" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">源码下载</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Cool CSS3 Dropdown Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/142319fgnervglweg22uag.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/142319fgnervglweg22uag.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/87/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14286" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (5).zip</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Skyrim-inspired Drop Down Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/142436jij6rj46j5eziz06.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/142436jij6rj46j5eziz06.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://cssdeck.com/labs/skyrim-inspired-drop-down-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://cssdeck.com/labs/skyrim-inspired-drop-down-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">源码下载</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">Soothing CSS3 Dropdown Animation</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/142545nnfen2eezi9e2c8d.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/142545nnfen2eezi9e2c8d.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://cssdeck.com/labs/skyrim-inspired-drop-down-menu" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">在线演示</a>&nbsp;&nbsp; &nbsp;&nbsp;<a href="http://cssdeck.com/labs/soothing-css3-dropdown-animation" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow">源码下载</a></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">CSS3 Slideout Menu</span></span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://www.html5cn.org/data/attachment/portal/201503/19/1426593q67j1gyg379tfq3.jpg" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201503/19/1426593q67j1gyg379tfq3.jpg" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
     </div> 
     <div style="word-wrap:break-word"> 
      <span style="font-size:14px; word-wrap:break-word"><a href="http://www.script-tutorials.com/demos/107/index.html" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="color:#0000f0; word-wrap:break-word">在线演示</span></a>&nbsp;&nbsp; &nbsp; 源码下载：<a href="http://www.html5cn.org/portal.php?mod=attachment&amp;id=14290" style="word-wrap:break-word; color:rgb(51,102,153); text-decoration:none; padding-left:20px; line-height:1.8em" rel="nofollow">source (6).zip</a></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>