CSS下拉导航菜单-宝鸡网迅科技

大量的CSS网页布局实例中，包括了很多CSS菜单方面的知识与案例，但是大家对这些知识的学习依然非常热衷。今天向大家介绍一款，非常经典的，纯CSS实现的下拉导航菜单，此案例中的浏览器条件注释信息也值得大家学习。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

css下拉菜单 - 52css.com<itle>  <link rel="stylesheet" type="text/css" href="menu1.css" />   <style> @charset "utf-8"; /* CSS Document */ body { font-family:verdana, sans-serif; font-size:small; } #navigation , #navigation li ul{ padding:0; margin:0; list-style-type: none; } #navigation li { float:left; text-align:center; position:relative; } #navigation li h3 { margin:0; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; height:30px; line-height:30px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; } #navigation li ul { display: none; } table { margin:-1px; border-collapse:collapse; } /* 以下只支持非IE6浏览器 */ #navigation li:hover a { color:#fff; background:#ff0000; } #navigation li:hover ul { display:block; position:absolute; top:30px; margin-top:1px; left:0; width:120px; } #navigation li:hover ul li a { display:block; background:#c5dbf2; color:#000; height:15px; line-height:15px; padding:5px 10px; width:110px; } #navigation li:hover ul li a:hover { color:#fff; background:#647413; } body { font-family:verdana, sans-serif; font-size:small;} #navigation , #navigation li ul{ padding:0; margin:0; list-style-type: none;} #navigation li { float:left; text-align:center; position:relative; }#navigation li h3 { margin:0; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; } #navigation li ul{ display: none;}table { margin:-1px; border-collapse:collapse;}/* IE6浏览器专用 */ #navigation li a:hover { color:#fff; background:#2687eb;} #navigation li a:hover ul { display:block; position:absolute; top:40px; margin-top:1px; left:0; width:120px;} #navigation li a:hover ul li a { display:block; background:#c5dbf2; color:#000; height:20px; line-height:20px; padding:5px 10px; width:110px;} #navigation li a:hover ul li a:hover { color:#fff; background:#6b839c; } </style> </head> <body> <ul > <li> <a href="#">栏目1  </a>  <table> <tr> <td><ul> <li><a href="#">栏目1-->菜单1</a></li> <li><a href="<a href="http://www.52css.com/" style="padding-bottom: 0px; margin: 0px 0px 0px 20px; padding-left: 0px; padding-right: 0px; color: rgb(0,0,0); font-size: 12px; font-weight: 400; text-decoration: none; padding-top: 0px">52css.com</a>http://www.52css.com">52css.com</a></li> <li><a href="#">栏目1-->菜单3</a></li> <li><a href="#">栏目1-->菜单4</a></li> </ul><d> <r> <able>  </li> <li> <a href="#">栏目2  </a>  <table> <tr> <td><ul> <li><a href="#">栏目2-->菜单1</a></li> <li><a href="#">栏目2-->菜单2</a></li> <li><a href="#">栏目2-->菜单3</a></li> <li><a href="#">栏目2-->菜单4</a></li> <li><a href="#">栏目2-->菜单5</a></li> </ul><d> <r> <able>  </li> <li> <a href="#">栏目3  </a>  <table> <tr> <td><ul> <li><a href="#">栏目3-->菜单1</a></li> <li><a href="#">栏目3-->菜单2</a></li> <li><a href="#">栏目3-->菜单3</a></li> </ul><d> <r> <able>  </li> </ul> </body> </html> </blockquote> <script src="/inc/AspCms_VisitsAdd.asp?id=463"></script> <div class="description entry-content"> <div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{},"image":{"viewList":["weixin","qzone","tsina","tqq","renren"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","qzone","tsina","tqq","renren"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://www.wangxunkeji.net/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> 此文关键字： </div> </div> </div> <div class="highlight"> <div class="single-container work-together inner"> <h2>在线项目合作</h2> 网迅科技结合创新的设计理念与专业技术，为客户制定从策划到创意再到技术的系列支持，帮助企业通过全新的媒体展示平台实现更多价值。如果您喜欢我们的项目，有兴趣合作？请您联系我们，以便我们能够为您提供可行的价值服务。 <div class="button-main button-main--project"><a href="/">项目需求提交</a> </div> </div> </div> <script type="text/javascript" src="/inc/AspCms_Statistics.asp"></script><div class="footer-container"> <div class="footer inner"> <div class="footer__blog"> <img src="/templates/cn/images/icon-blog.png" class="icon-blog" alt="宝鸡SEO优化" /> <h3>宝鸡网迅科技信息技术有限公司</h3> <div class="blog__post-list"> <div class="blog__post-list-item"> <div class="description entry-summary"> 地址:陕西省宝鸡市渭滨区石鼓工业园区 热线: 13619177922 传真: 0917 - 3639162 Email: wangxuntech@163.com 业务QQ: <a href="http://wpa.qq.com/msgrd?v=3&uin=278260220&site=qq&menu=yes" rel="bookmark" class="entry-title" style="color:#FFFFFF; font-weight:normal;"> 278260220 </a> ,<a href="http://wpa.qq.com/msgrd?v=3&uin=2446392356&site=qq&menu=yes" rel="bookmark" class="entry-title" style="color:#FFFFFF; font-weight:normal;"> 2446392356 </a> ICP编号: <a href="https://beian.miit.gov.cn/" class="entry-title" style="color:#FFFFFF; font-weight:normal;" target="_blank">陕ICP备15006670号</a> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61030202000249" rel="bookmark" class="entry-title" style="color:#FFFFFF; font-weight:normal;"><img src="/templates/cn/images/police.png" style="float:left; padding-top:5px; border:0px;"/>陕公网安备 61030202000249号</a> </div> <div class="button-light" style="width:280px; padding-bottom:10px;"><a href="tel:13619177922" rel="bookmark" class="entry-title">热线电话:<img title="网迅科技客服热线" alt="网迅科技客服热线" border="0" src="/templates/cn/images/yx_tel.png" width="30"/> 13619177922 </a></div> </div> </div> </div> <div class="footer__about"> <a href="/"><img src="/templates/cn/images/logo-footer.png" alt="宝鸡品牌网站建设----网迅科技" border="0" class="icon-logo" /></a> <h3>关于我们</h3> 宝鸡网迅科技是集宝鸡网站建设、响应式网站开发、营销型网站建设、网站SEO优化、企业网络营销、企业office定制培训、大学精品资源课程建设、企业招投标PPT设计与制作等服务的信息化服务公司。网迅科技结合创新的设计理念与专业技术，为客户提供整合的网站开发及SEO优化方案，帮助企业通过全新的媒体展示平台，实现全网营销，获取更多价值... </div> <div class="footer__copyright"> @2015 <a href="https://www.wangxunkeji.net/">wangxunkeji.net</a> Design | <a href="https://www.sxxlti.com/">钛锻件</a> | <a href="http://www.kehuiti.com/">钛棒</a>| <a href="https://www.bjliti.cn/">钛合金棒</a>| <a href="http://www.bjlkty.com/">TC4钛合金</a> | <a href="https://www.kzjsbc.com">钛靶</a>| <a href="https://www.bjjwtai.com">钛合金锻件</a>| <a href="https://www.xuyangti.com">钛环</a> | <a href="http://www.yorimetal.com">yorimetal</a> </div> </div> </div> <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> <script type="text/javascript"> // Mobile Menu toggle $('#MenuToggle').click(function () { $('#jqmenu').slideToggle('slow', function () { }); $('html, body').animate({ scrollTop: 0 }, 1000); }); // Remove button classes for mobile menu enquire.register("screen and (max-width: 747px)", { match : function() { $('.menu').css('display','none'); $('.menu li').removeClass('button-main button-main--project'); // Show sidebar }, unmatch: function() { $('.menu').css('display','inline-block'); $('.menu li:last').addClass('button-main button-main--project'); } }); //MODERNIZR if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } $( "a img" ).parent().addClass( "no-border" ); </script> <script src="/Templates/cn/js/site.min.js"></script> </body> </html>