CSS下拉菜单

最新推荐文章于 2023-01-03 23:37:56 发布

魔拉宝

最新推荐文章于 2023-01-03 23:37:56 发布

阅读量740

点赞数

分类专栏：教程全集特效代码文章标签： css stylesheet ie 浏览器 class div

特效代码同时被 2 个专栏收录

109 篇文章 1 订阅

订阅专栏

教程全集

61 篇文章 0 订阅

订阅专栏

这是一个标准的CSS下拉菜单制作教程，有针对目前流行的IE6/IE7/IE8不同版本的CSS代码，因此可以在IE之间完全兼容，不过其它的浏览器像火狐/GG浏览器之类的没有测试，如果兼容IE8的话，那么兼容火狐应该问题不大吧。菜单使用蓝色基调，滑向二级菜单更换背景，操作的感觉很舒服。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>纯css下拉菜单</title>  <mce:style> </mce:style><style mce_bogus="1">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:hover a { color:#fff; background:#2687eb; } #navigation li:hover ul { display:block; position:absolute; top:40px; margin-top:1px; left:0; width:120px; } #navigation li:hover ul li a { display:block; background:#c5dbf2; color:#000; height:20px; line-height:20px; padding:5px 10px; width:110px; } #navigation li:hover ul li a:hover { color:#fff; background:#6b839c; } </styel>   </head> <body> <ul id="navigation"> <li> <a href="http://www.codefans.net" mce_href="http://www.codefans.net">源码爱好者  </a>  <table><tbody><tr><td> <ul> <li><a href="#" mce_href="#">最新更新</a></li> <li><a href="#" mce_href="#">网页特效</a></li> </ul> </td></tr></tbody></table>  </li> <li> <a href="#" mce_href="#">源码资源 </a>  <table><tbody><tr><td> <ul> <li><a href="#" mce_href="#">ASP</a></li> <li><a href="#" mce_href="#">PHP</a></li> <li><a href="#" mce_href="#">AJAX</a></li> </ul> </td></tr></tbody></table>  </li> <li> <a href="#" mce_href="#">网页特效 </a>  <table><tbody><tr><td> <ul> <li><a href="#" mce_href="#">导航</a></li> <li><a href="#" mce_href="#">布局</a></li> <li><a href="#" mce_href="#">表单</a></li> </ul> </td></tr></tbody></table>  </li> </ul> </body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>Anywidth dropdown with centered top and sub levels</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth-center-center.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {width:750px; height:420px; background:url(http://img.imagedash.com/Koew.jpg); text-align:center;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} #menu ul {display:inline-block;} #menu ul {display:inline;} #menu li {display:inline-block; display:inline;} #menu ul.level1 div {position:absolute; left:-9999px;} #menu ul.level1 {display:table; margin:0 auto; border:1px solid #c0d7e9; border-width:0 1px 1px 1px;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu ul.level1 {background:#5a7797;} #menu ul li div ul {background:#c0d7e9; padding:0 1px 1px 1px;} #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:bold 11px verdana,arial,sans-serif; color:#cde; line-height:25px; text-decoration:none;padding:0 15px 0 15px; text-align:center;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li:hover div {left:50%; top:25px;} #menu ul li:hover div ul {display:block; position:relative; left:-50%;} #menu ul li div ul li a {background:#5a7797;} #menu a:hover div {left:0; top:23px;} #menu a:hover div ul {position:relative; left:-50%;} #menu li a.fly {background:transparent url(http://img.imagedash.com/rQ1b.gif) no-repeat right center;} #menu li a:hover, #menu li a.fly:hover {background-color:#5a7797; color:#fc0;} #menu li:hover > a, #menu ul li:hover > a.fly {background-color:#5a7797; color:#fc0;} #menu table {position:absolute; height:0; width:0; left:50%; border-collapse:collapse; margin-top:-4px;}</style> </head> <body><div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url" mce_href="#url" _fcksavedurl="#url">Home</a></li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Contact Us</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Email</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Telephone</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Online Form</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Snail Mail Address</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Resort</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Ski Hire Facilities</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Main Ski Slopes</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Night Life</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Restaurants</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Car Hire</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Surrounding Area</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Where to go</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">What to do</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Places of interest</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">National parks & Museums</a></li> </ul> </div>  </li> <li class="level1-li left"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Information</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Money Exchange</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Resort Essential Information</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Language</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Short Breaks</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a" href="#url" mce_href="#url" _fcksavedurl="#url">Privacy</a></li> </ul> </div></body> </html>

Webkit 介绍 CSS 渐变特性差不多有两年时间了，但由于与大部分浏览器不兼容的原因，很少实际应用。值得欣慰的是 Firefox 3.6 + 已经支持 CSS 渐变，我们可以通过样式呈现渐变效果，而不必创建一个渐变图像。这篇文章将告诉你如何书写 CSS 渐变代码使其兼容主流浏览器：IE，Firefox 3.6 +，Safari 和 Chromr。此外，尝试更新使用了 CSS 渐变的下拉菜单演示。

Webkit 引擎

以下代码适用于 webkit 引擎的浏览器，如 Safari，Chrome 等。它会从顶部 (#ccc) 到底部 (#000) 呈现一个线性渐变。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

Internet Explorer

以下的滤镜代码只能被 IE 解释执行：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

跨浏览器 CSS 渐变（演示）

结合将上面的三块代码，就是一个跨浏览器的渐变效果。注：我添加了一个背景颜色以防用户使用的浏览器不支持该功能。

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

CSS 渐变下拉菜单

以下是一个使用 CSS3 文字阴影 (text-shadow)，圆角 (radius-border)，阴影 (box-shadow) 的纯 CSS 渐变下拉菜单，未涉及任何 JavaScript 或图片。

Internet Explorer 的局限性

IE 的渐变滤镜不支持多重渐变 (color-stop)，渐变角度 (gradient angle)，径向渐变 (radial gradient)。这意味着你只能使用 StartColorStr 和 EndColorStr 两种颜色指定水平或垂直的线性渐变。

结束语

请注意并不是所有浏览器都支持 CSS 渐变属性。为保证安全，在编码页面布局时不要依赖于 CSS 渐变，它只适合用来加强样式表现。

====================================================================

一说到下拉菜单每个人都不陌生,下拉菜单的设计看上去非常的简单：无非是页面上放置一些链接，通过这些链接用户可浏览和使用整个网站。事实并非如此，菜单设计是非常复杂和严谨的。
今天我就给大家带来一款兼容所有浏览器的CSS下拉菜单，这是前段时间给客户做的网站，客户用的360的浏览器，所以要做到所有浏览器都兼容。

支持所有浏览器的下拉菜单
演示效果： http://www.56mp.cn/upload/CSSnav/
HTML部分：
<div class="menu">
<ul>
       <li><a href=" http://www.56mp.cn/" target="_self">首页</a></li>

    <li><a href=" http://www.56mp.cn/" target="_self">关于我们</a>

<ul>
                    <li><a href=" http://www.56mp.cn/">公司简介</a></li>
                    <li><a href=" http://www.56mp.cn/">公司荣誉</a></li>
                    <li><a href=" http://www.56mp.cn/">公司团队</a></li>
      <li><a href=" http://www.56mp.cn/">公司业绩</a></li>
                    <li><a href=" http://www.56mp.cn/">企业文化</a></li>
      <li><a href=" http://www.56mp.cn/">我们的责任</a></li>
               </ul>

</li>
    <li><a href=" http://www.56mp.cn/" target="_self">新闻中心</a>

<ul>
                     <li><a href=" http://www.56mp.cn/">公司新闻</a></li>
                     <li><a href=" http://www.56mp.cn/">行业新闻</a></li>
               </ul>

</li>
    <li><a href=" http://www.56mp.cn/" target="_self">产品展示</a>

<ul>
                    <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
                    <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
                    <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
      <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
                    <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
      <li><a href=" http://www.56mp.cn/">绿色产品</a></li>
                    <li><a href=" http://www.56mp.cn/"><b>+ 更多产品…</b></a></li>
               </ul>

</li>
    <li><a href=" http://www.56mp.cn/" target="_self">研发中心</a>

<ul>
                     <li><a href=" http://www.56mp.cn/">实验室</a></li>
                     <li><a href=" http://www.56mp.cn/">研究所</a></li>
                     <li><a href=" http://www.56mp.cn/">工艺室</a></li>
                     <li><a href=" http://www.56mp.cn/">开发室</a></li>
               </ul>

</li>
    <li><a href=" http://www.56mp.cn/" target="">人才招聘</a></li>
    <li><a href=" http://www.56mp.cn/" target="">在线留言</a></li>

    <li><a href=" http://www.56mp.cn/" target="_self">联系我们</a></li>
</ul>
</div>
CSS部分：
/*导航条开始*/
.menu{ height:32px;
width:758px;
margin:5px auto;
background:url(images/menubj.gif) repeat;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; padding-top:8px;font-family:"微软雅黑"; font-weight:bold;}
.menu a{display:block;color:#fff;text-decoration:none;width:88px;line-height:33px; text-align:center;margin-left:6px;font-family:"微软雅黑";font-weight:bold;}
.menu a:hover{color:#000;background:url(images/nav_bg_hover.jpg) repeat-x; text-decoration:none;margin-left:6px;font-family:"微软雅黑";font-weight:bold;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:88px;height:33px;margin-left:3px;border-bottom:1px solid #858585;background:#fbfcfe;color:#000;font-family:"微软雅黑";font-weight:bold;}
.menu ul ul li a:hover{border:0;background:#e5e5e5;border-bottom:1px solid #e3e4e6;margin-left:3px;font-family:"微软雅黑";font-weight:bold;}
/*导航条结束*/
如有其他修改不懂的请与本站联系。