<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>css菜单演示</title>

 <style type="text/css">

 *{margin:0;padding:0;border:0;}

 body {

     font-family: arial, 宋体, serif;

     font-size:12px;

 }

 #nav {

     text-align:center;

     line-height:24px;list-style-type:none;background:#666;

     margin-left:30px;

 }

 #nav a {

     display: block; width: 80px; text-align:center;

 }

 #nav a:link {

     color:#666666; text-decoration:none;

 }

 #nav a:visited {

     color:#666;text-decoration:none;

 }

 #nav a:hover {

     color:#CCCCCC;text-decoration:none;font-weight:bold;

 }

 #nav li {

     float: left; width: 80px; background:#00FFFF;

 }

 #nav li a:hover{

     background:#999;

 }

 #nav li ul {

     line-height:27px;list-style-type:none;text-align:left;

     left:-999em;width:80px; position: absolute;

     margin-left:-40px;

 }

 #nav li ul li{

     float:left;width:80px;background: #F6F6F6;

 }

 #nav li ul a{

     display:block;width:80px;text-align:left;padding-left:24px;

 }

 #nav li ul a:link {

     color:#666; text-decoration:none;

 }

 #nav li ul a:visited {

     color:#666;text-decoration:none;

 }

 #nav li ul a:hover {

     color:#F3F3F3;text-decoration:none;font-weight:normal;

     background:#ccc;

 }

 #nav li:hover ul {

     left: auto;

 }

 #nav li.sfhover ul {

     left: auto;

 }

 #content {

     clear: left;

 }

 </style>

 <script type=text/javascript>

 function menuFix() {

     var elems = document.getElementById("nav").getElementsByTagName("li");

     for (var i=0; i<elems.length; i++) {

         elems[i].onmouseover = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onMouseDown = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onMouseUp = function() {

             this.className += (this.className.length>0? " ": "") + "sfhover";

         }

         elems[i].onmouseout = function() {

             this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");

         }

     }

 }

 window.onload=menuFix;

 </script>

 </head>

 <body>

     <ul id="nav">

         <li><a href="#">下拉菜单</a>

             <ul>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

             </ul>

         </li>

         <li><a href="#">下拉菜单</a>

             <ul>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

                 <li><a href="#">下拉菜单</a></li>

             </ul>

         </li>

     </ul>

 </body>

 </html>

符合web标准的网页下拉菜单的更多相关文章

  1. Delphi访问网页中的下拉菜单

    Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml;procedure TForm1.Button1Click(Sender: TObject);va ...

  2. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  3. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. EasyDropDown – 很棒的下拉菜单，含精美主题

    EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航.和著名的下拉插件 Chosen 很像,但是具有自己 ...

  6. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

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

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. 编程语言拟人化：Java、C++、Python、Ruby、PHP、C#、JS！--隆重推荐转

    http://next.rikunabi.com/tech/docs/ct_s03600.jsp?p=002412 Java.C++.Python.Ruby.C#.PHP.JavaScript.7つの ...

  2. 用RSA实现Web单点登录密码的加密传输

    在使用通用权限管理系统(吉日嘎拉)的单点登录功能时,对登录密码使用了RSA加密(非对称加密),有使用这个权限管理系统的可参考下. 前端部分,请引用以下几个js文件: <script type=& ...

  3. CSS 创建方式与优先级

    最近想学习自动化测试--web元素的匹配查找,一直搞不懂CSS的相关标签与对元素的渲染方式. 本文转自W3School: http://www.w3school.com.cn/css/css_howt ...

  4. Mysql 中bitwise对效率的影响？？

    一直很疑惑,这个谁可以解释一下? 我也正在了解这方面的知识!

  5. javaweb学习总结八(xml约束DTD)

    一:XML约束概念 xml约束:可以编写一个文档来约束xml文件的书写规范. xml语言格式比较严谨,不可能让程序员随意编写,所以必须要有约束. 二:常用的xml约束技术 1:DTD,document ...

  6. 安装.Net framework 3.5 sp1报错的解决方法

    错误日志,提示: [11/22/07,18:04:40] Microsoft .NET Framework 2.0a: [2] Error: Installation failed for compo ...

  7. 转：android git开源项目列表

    1. 知乎的合集说明 https://www.zhihu.com/question/19804692 2. http://p.codekk.com/

  8. Unity 5.4大赞：HTC Vive经典The lab渲染器开源

    HTC Vive提供了一个不错的免费VR demo,最近1周仔细体验了一番. 仔细看了其安装文件,竟然是Unity 5.4beta版本(通过查log,知道Valve公司用的是最新的5.4.0b11版本 ...

  9. 实例介绍Cocos2d-x物理引擎：HelloPhysicsWorld

    我们通过一个实例介绍一下,在Cocos2d-x 3.x中使用物理引擎的开发过程,熟悉这些API的使用.这个实例的运行后的场景,当场景启动后,玩家可以触摸点击屏幕,每次触摸时候,就会在触摸点生成一个新的 ...

  10. C#学习笔记之线程 - 通知Signal

    通知事件等待句柄 Signal With EventWaitHandle 事件等待句柄常用于通知.当一个线程等待直到接收到另外一个线程发出的信号.事件等待句柄是最简单的信号结构,它与C#事件无关.有三 ...