杭州设计公司,杭州广告设计公司
网页设计
纯CSS的下拉菜单 支持多浏览器
信息来源:互联网     栏目类别: 网页设计     浏览次数:     发表评论 减小字体 增大字体
  • <!DOCTYPE&**bsp;html&**bsp;PUBLIC&**bsp;"-//W3C//DTD&**bsp;XHTML&**bsp;1.0&**bsp;Tra**sitio**al//EN"&**bsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra**sitio**al.dtd">&**bsp;&**bsp;
  • <html>&**bsp;&**bsp;
  • <!--&**bsp;www.div-css.com&**bsp;网站标准化&**bsp;&**bsp;2007-4-16&**bsp;-->&**bsp;&**bsp;
  • <head>&**bsp;&**bsp;
  • <meta&**bsp;http-equiv="Co**te**t-Type"&**bsp;co**te**t="text/html;&**bsp;charset=utf-8"&**bsp;/>&**bsp;&**bsp;
  • <title>纯CSS的下拉菜单&**bsp;支持IE6&**bsp;IE7&**bsp;Firefox&**bsp;--www.div-css.com&**bsp;网站标准化</title>&**bsp;&**bsp;
  • &**bsp;&**bsp;
  • <style&**bsp;type="text/css">&**bsp;&**bsp;
  • *{margi**:0;paddi**g:0;} &**bsp;&**bsp;
  • .me**u{fo**t-size:12px;positio**:relative;z-i**dex:100;} &**bsp;&**bsp;
  • .me**u&**bsp;ul{list-style:**o**e;} &**bsp;&**bsp;
  • .me**u&**bsp;li&**bsp;{float:left;positio**:relative;} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;ul&**bsp;{visibility:hidde**;positio**:absolute;left:3px;top:23px;} &**bsp;&**bsp;
  • .me**u&**bsp;table&**bsp;{positio**:absolute;&**bsp;top:0;&**bsp;left:0;} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;li:hover&**bsp;ul, &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;a:hover&**bsp;ul{visibility:visible;} &**bsp;&**bsp;
  • .me**u&**bsp;a{display:block;border:1px&**bsp;solid&**bsp;#aaa;backgrou**d:red;paddi**g:2px&**bsp;10px;margi**:3px;color:#fff;text-decoratio**:**o**e;} &**bsp;&**bsp;
  • .me**u&**bsp;a:hover{backgrou**d:#f2cdb0;color:#f00;border:1px&**bsp;solid&**bsp;red;} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;ul{} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;ul&**bsp;li&**bsp;{clear:both;text-alig**:left;fo**t-size:12px;} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;ul&**bsp;li&**bsp;a{display:block;width:100px;height:13px;margi**:0;border:0;border-bottom:1px&**bsp;solid&**bsp;red;} &**bsp;&**bsp;
  • .me**u&**bsp;ul&**bsp;ul&**bsp;li&**bsp;a:hover{border:0;backgrou**d:#f2cdb0;border-bottom:1px&**bsp;solid&**bsp;#fff;} &**bsp;&**bsp;
  • </style>&**bsp;&**bsp;
  • </head>&**bsp;&**bsp;
  • &**bsp;&**bsp;
  • <body>&**bsp;&**bsp;
  • &**bsp;&**bsp;
  • <div&**bsp;class="me**u">&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">XHTML/CSS &**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;IE&**bsp;7]><!--></a><!--<![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]><table><tr><td><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">标准</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">教程</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">技术文章</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">常见问题</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">布局教程专题</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">CSS菜单</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">浏览器兼容</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">滚动条相关</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">圆角矩形专题</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">CSS特效欣赏专题</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]></td></tr></table></a><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">AJAX &**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;IE&**bsp;7]><!--></a><!--<![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]><table><tr><td><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">AJAX教程</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">AJAX技术</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]></td></tr></table></a><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">Javascript &**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;IE&**bsp;7]><!--></a><!--<![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]><table><tr><td><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">JSON</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">技术文章</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]></td></tr></table></a><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">DOM</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">XML</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">正则表达式 &**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;IE&**bsp;7]><!--></a><!--<![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]><table><tr><td><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">正则表达式简介</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">正则表达式之道</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]></td></tr></table></a><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">网站优化</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">电脑网络</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">建站技术 &**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;IE&**bsp;7]><!--></a><!--<![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]><table><tr><td><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">PHP</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">ASP</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">ASP.NET</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">JSP</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">SQL</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">Flash</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<li><a&**bsp;href="">Dreamweaver</a></li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;<!--[if&**bsp;lte&**bsp;IE&**bsp;6]></td></tr></table></a><![e**dif]-->&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;&**bsp;</li>&**bsp;&**bsp;
  • &**bsp;&**bsp;&**bsp;&**bsp;</ul>&**bsp;&**bsp;
  • </div>&**bsp;&**bsp;
  • &**bsp;&**bsp;
  • <br&**bsp;/><br&**bsp;/>&**bsp;&**bsp;
  • <a&**bsp;href="http://www.div-css.com"&**bsp;target="_bla**k">www.div-css.com&**bsp;网站标准化&**bsp;&**bsp;2007-4-16</a>&**bsp;&**bsp;
  • css&**bsp;drop&**bsp;dow**&**bsp;me**u &**bsp;&**bsp;
  • </body>&**bsp;&**bsp;
  • </html>&**bsp;&**bsp;
  • 本文标签:纯CSS的下拉菜单把本文收藏到 网摘 博采 百度
    上一篇:草根站长都是杨白劳          回网页设计列表         下一篇:XHTML完全CSS下拉菜单
    搜索本站其他内容: 百度一下:[纯CSS的下拉菜单 支持多浏览器]   Google搜索:[纯CSS的下拉菜单 支持多浏览器]
    最新网友评论文章↓
    1.靠2009-11-19 20:42:45
    2.去2009-11-19 20:39:41
    3.脑残还是变相炫富?2009-11-16 20:17:58
    4.好感动哦2009-11-7 15:40:32
    5.怎么学习2009-10-20 10:54:50

    文章添加时间:2009-3-19,文件大小:20.32 KB,最近更新时间:2011-12-16 18:11:24 返回TOP↑            

    本站文章搜集自网络;共享网络,共享快乐,我为人人,人人为我;如果您知道本站未知来源文章请告知本站谢谢!
    文中及留言观点不代表本站;本站转载内容只是为了更好的交流;
    若侵犯了您的版权请联系E-mail:有事儿,您Q我!,本站核实后立即处理!

  •             平面设计| 标志设计| 包装设计| 网页设计| 广告设计| VI设计| 画册设计| 专卖店设计| 展位设计| 名片设计| 网站地图|    建议使用IE5及以上1024*768分辨率
  •             友情链接 版权所有 © 杭州威迪广告公司 2008-2010 | TEL:0571-88385993 13296756810 浙ICP备09011107号