首页 > > 网页制作 > css >

纯CSS制作下拉导航菜单实例代码

2008-02-23 08:34:16来源：互联网阅读 ()

新老客户大回馈,云服务器低至5折

<style type="text/css"> .menu { font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em; padding-bottom:250px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; position:relative; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:139px; height:3em; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#dfc184; padding-left:10px; line-height:3em; } * html .menu ul li a, .menu ul li a:visited { width:149px; w\idth:139px; } .menu ul li ul { display: none; } table { margin:-1px; border-collapse:collapse; font-size:1em; } /* specific to non IE browsers */ .menu ul li:hover a { color:#fff; background:#bd8d5e; } .menu ul li:hover ul { display:block; position:absolute; top:3em; margin-top:1px; left:0; width:150px; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; height:auto; line-height:1.2em; padding:5px 10px; width:129px } .menu ul li:hover ul li a.drop { background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat; } .menu ul li:hover ul li a:hover { background:#c9c9a7; color:#000; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:150px; top:0; width:150px; } .menu ul li:hover ul li:hover ul.left { left:-150px; } </style>  <div class="menu"> <ul> <li><a class="drop" href="../menu/index.html">DEMOS  </a>  <table><tr><td> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders  </a>  <table><tr><td> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> </td></tr></table>  </li> <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> </td></tr></table>  </li> <li><a href="../boxes/index.html">BOXES  </a>  <table><tr><td> <ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> </td></tr></table>  </li> <li><a href="../mozilla/index.html">MOZILLA  </a>  <table><tr><td> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> </td></tr></table>  </li> <li><a href="../ie/index.html">EXPLORER  </a>  <table><tr><td> <ul> <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> </ul> </td></tr></table>  </li> <li><a href="../opacity/index.html">OPACITY  </a>  <table><tr><td> <ul> <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK  </a>  <table><tr><td> <ul class="left"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> </td></tr></table>  </li> </ul> </td></tr></table>  </li> </ul> </div> <p class="article-con-biaoqian mt-20"> <span>标签：</span> </p> <p class="banquan">版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com<br/> 特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 </p> </div> <a href="https://love.4c.cn/" target="_blank"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-20" alt=""/></a> <div class="other-article mt-10 font14"> <p><span class="mr-20">上一篇：<a href='/info/html/wangyezhizuo/css/20080225/41318.html'>浅议网页制作中的表单设计</a> </span></p> <p><span class="mr-20">下一篇：<a href='/info/html/wangyezhizuo/css/20080225/41323.html'>CSS基础学习：不同色链接和其下划线</a> </span></p> </div> <div class="relative-link mt-20"> <div class="relative-tab"> <span class="relative-tab-active">相关文章</span> </div> <div class="relative-con"> <div class="relative-list mt-20"> <ul> </ul> </div> </div> </div> </div> <div class="category mt-20"> <p><span>IDC资讯：</span> <a href="/info/html/IDCzixun/xunizhuji/">主机资讯</a> <a href="/info/html/IDCzixun/yumingzhuce/">注册资讯</a> <a href="/info/html/IDCzixun/zhujizuyong/">托管资讯</a> <a href="/info/html/IDCzixun/vpszhuji/">vps资讯</a> <a href="/info/html/IDCzixun/zhinenjianzhan/">网站建设</a> </p><p><span>网站运营：</span> <a href="/info/html/wangzhanyunying/jianzhanjingyan/">建站经验</a> <a href="/info/html/wangzhanyunying/cehuayingli/">策划盈利</a> <a href="/info/html/wangzhanyunying/sousuoyouhua/">搜索优化</a> <a href="/info/html/wangzhanyunying/wangzhantuiguang/">网站推广</a> <a href="/info/html/wangzhanyunying/mianfeiziyuan/">免费资源</a> </p><p><span>网站联盟：</span> <a href="/info/html/wangzhanlianmeng/lianmengxinwen/">联盟新闻</a> <a href="/info/html/wangzhanlianmeng/lianmengjieshao/">联盟介绍</a> <a href="/info/html/wangzhanlianmeng/lianmengdianping/">联盟点评</a> <a href="/info/html/wangzhanlianmeng/wangzhuanjiqiao/">网赚技巧</a> </p><p><span>行业资讯：</span> <a href="/info/html/xingyezixun/sousuoyinqing/">搜索引擎</a> <a href="/info/html/xingyezixun/wangluoyouxi/">网络游戏</a> <a href="/info/html/xingyezixun/dianzishangwu/">电子商务</a> <a href="/info/html/xingyezixun/guanggaochuanmei/">广告传媒</a> </p><p><span>网络编程：</span> <a href="/info/html/wangluobiancheng/DotNetBianCheng/">Asp.Net编程</a> <a href="/info/html/wangluobiancheng/Aspbiancheng/">Asp编程</a> <a href="/info/html/wangluobiancheng/Phpbiancheng/">Php编程</a> <a href="/info/html/wangluobiancheng/Xmlbiancheng/">Xml编程</a> <a href="/info/html/wangluobiancheng/Access/">Access</a> <a href="/info/html/wangluobiancheng/Mssql/">Mssql</a> <a href="/info/html/wangluobiancheng/Mysql/">Mysql</a> <a href="/info/html/wangluobiancheng/qita/">其它</a> </p><p><span>服务器技术：</span> <a href="/info/html/fuwuqijishu/Webfuwuqi/">Web服务器</a> <a href="/info/html/fuwuqijishu/Ftpfuwuqi/">Ftp服务器</a> <a href="/info/html/fuwuqijishu/Mailfuwuqi/">Mail服务器</a> <a href="/info/html/fuwuqijishu/Dnsfuwuqi/">Dns服务器</a> <a href="/info/html/fuwuqijishu/anquanfanghu/">安全防护</a> </p><p><span>软件技巧：</span> <a href="/info/html/ruanjianjiqiao/qitaruanjian/">其它软件</a> <a href="/info/html/ruanjianjiqiao/Word/">Word</a> <a href="/info/html/ruanjianjiqiao/Excel/">Excel</a> <a href="/info/html/ruanjianjiqiao/Powerpoint/">Powerpoint</a> <a href="/info/html/ruanjianjiqiao/Ghost/">Ghost</a> <a href="/info/html/ruanjianjiqiao/Vista/">Vista</a> <a href="/info/html/ruanjianjiqiao/QQkongjian/">QQ空间</a> <a href="/info/html/ruanjianjiqiao/QQ/">QQ</a> <a href="/info/html/ruanjianjiqiao/FlashGet/">FlashGet</a> <a href="/info/html/ruanjianjiqiao/xunlei/">迅雷</a> </p><p><span>网页制作：</span> <a href="/info/html/wangyezhizuo/FrontPages/">FrontPages</a> <a href="/info/html/wangyezhizuo/Dreamweaver/">Dreamweaver</a> <a href="/info/html/wangyezhizuo/Javascript/">Javascript</a> <a href="/info/html/wangyezhizuo/css/">css</a> <a href="/info/html/wangyezhizuo/photoshop/">photoshop</a> <a href="/info/html/wangyezhizuo/fireworks/">fireworks</a> <a href="/info/html/wangyezhizuo/Flash/">Flash</a> </p><p><span>程序设计：</span> <a href="/info/html/chengxusheji/Javajishu/">Java技术</a> <a href="/info/html/chengxusheji/C-C--/">C/C++</a> <a href="/info/html/chengxusheji/VB/">VB</a> <a href="/info/html/chengxusheji/delphi/">delphi</a> </p><p><span>网络知识：</span> <a href="/info/html/wangluozhishi/wangluoxieyi/">网络协议</a> <a href="/info/html/wangluozhishi/wangluoanquan/">网络安全</a> <a href="/info/html/wangluozhishi/wangluoguanli/">网络管理</a> <a href="/info/html/wangluozhishi/zuwangfangan/">组网方案</a> <a href="/info/html/wangluozhishi/Ciscojishu/">Cisco技术</a> </p><p><span>操作系统：</span> <a href="/info/html/caozuoxitong/Win2000/">Win2000</a> <a href="/info/html/caozuoxitong/WinXP/">WinXP</a> <a href="/info/html/caozuoxitong/Win2003/">Win2003</a> <a href="/info/html/caozuoxitong/Mac-OS/">Mac OS</a> <a href="/info/html/caozuoxitong/Linux/">Linux</a> <a href="/info/html/caozuoxitong/FreeBSD/">FreeBSD</a> </p> </div> </div> <div class="rightcon f-r ml-20"> <div class="sider-img"> <a href="https://www.west.cn/cloudhost/?ReferenceID=zzxxw999" target="_blank" title="云服务器仅需0.69元/天起！快速备案，无需幕布！"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-12"></a> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-read"></i>热门词条</strong></div> <div class="biaoqian-con"> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-liebiaodaohang_zixun"></i>最新资讯</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/photoshop/20210526/4674019.html"><i class="radius"></i>Photoshop绘制立体风格的微笑表情</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674018.html"><i class="radius"></i>PS文字特效教程：制作公路上个性的涂鸦</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674017.html"><i class="radius"></i>Photoshop设计卷边效果的变形金刚电影</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674016.html"><i class="radius"></i>PS色彩修复教程：利用色阶工具快速给红</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674015.html"><i class="radius"></i>PS半透明物体抠图：利用通道选区工具抠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674014.html"><i class="radius"></i>PS海报设计技巧教程：学习制作个性的扭</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674013.html"><i class="radius"></i>PS图片特效制作教程：学习给铁塔图片制</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674012.html"><i class="radius"></i>学习用photoshop把浑浊的海水照片后期</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674011.html"><i class="radius"></i>PS古风照片教程：给古风美女打造出女侠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674010.html"><i class="radius"></i>PS个性人物海报制作：设计创意时尚的玻</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-remen"></i>热门关注</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/css/20180723/4376274.html"><i class="radius"></i>揭秘黑客步骤:怎么盗取别人的微信密码?</a></li> <li><a href="/info/html/wangyezhizuo/css/20180720/4361149.html"><i class="radius"></i>揭秘黑客教程:盗取微信号密码最简单方</a></li> <li><a href="/info/html/wangyezhizuo/css/20180720/4361151.html"><i class="radius"></i>揭秘黑客步骤:怎么盗取别人的微信密码?</a></li> <li><a href="/info/html/wangyezhizuo/css/20180722/4368284.html"><i class="radius"></i>揭秘黑客步骤:怎么盗取别人的微信密码?</a></li> <li><a href="/info/html/wangyezhizuo/css/20180624/4231994.html"><i class="radius"></i>福利来了，各种技术视频资源</a></li> <li><a href="/info/html/wangyezhizuo/css/20180703/4269292.html"><i class="radius"></i>layui 弹出框改变按钮颜色样式自定</a></li> <li><a href="/info/html/wangyezhizuo/css/20180802/4422257.html"><i class="radius"></i>VS Code如何更换主题皮肤？</a></li> <li><a href="/info/html/wangyezhizuo/css/20191028/4661399.html"><i class="radius"></i>免费搜索引擎提交(登录)入口大全</a></li> <li><a href="/info/html/wangyezhizuo/css/20180623/4225700.html"><i class="radius"></i>SqlBulkCopy使用介绍以及注意事项</a></li> <li><a href="/info/html/wangyezhizuo/css/20180624/4231324.html"><i class="radius"></i>【从零开始搭建自己的.NET Core Api框</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-tag"></i>热门标签</strong></div> <div class="biaoqian-con pt-10"></div> </div> </div> </div> </div> <div id="footer"> <div class="gray-line"></div> <div class="white-line"></div>   <div class="footer-bottom"> <p>为学习和知识分享目的，本站文章部分自网络，本站文章部分自网络，如有侵权，请联系：2653426586@qq.com QQ：2653426586 </p> <p>如有其他需求，请联系：2653426586@qq.com QQ：2653426586 </p> <p> <span>友情链接：</span> <a href="https://www.lnmpweb.cn/" target="_blank">网络安全</a> <a href="https://www.ysidc.top/" target="_blank">运维经验</a> <a href="https://blog.mydns.vip" target="_blank">IT技术分享</a> <a href="https://www.jdian.vip/" target="_blank">运维随笔录</a> <a href="http://www.aihuaju.com/" target="_blank">鲜花</a> <a href="https://www.dongjiaospa.vip/" target="_blank">东郊到家</a> <a href="https://www.wangyuespa.vip/" target="_blank">往约到家</a> </p> </div></div><iframe src="https://market.aliyun.com/products/57742013/cmjj00059601.html?" width="0" height="0"></iframe><iframe src="https://market.aliyun.com/products/57742013/cmjj00060340.html?" width="0" height="0"></iframe><div style=" display:none;"> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?db46b5f21c293739bcbcfa2490e39804"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script>(function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s);})();</script></div><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-1045757556');</script> <script type="text/javascript"> $(".relative-link").slide( { mainCell:".relative-con", titCell:".relative-tab > a", titOnClassName:"relative-tab-active", effect:"fold" }); </script> </body> </html>