<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中的DeskTop类

        在Jdk1.6以后新增加了一个类--DeskTop,在JDK中它的解释是这样的: The Desktop class allows a Java application to launch a ...

  2. Koa2 源码解析(1)

    Koa2 源码解析 其实本来不想写这个系列文章的,因为Koa本身很精简,一共就4个文件,千十来行代码. 但是因为想写 egg[1] 的源码解析,而egg是基于Koa2的,所以就先写个Koa2的吧,用作 ...

  3. ASP.NET获取URL

    //获取完整url (协议名+域名+站点名+文件名+参数) string fullUrl = Request.Url.ToString(); //获取客户端请求的URL信息(不包括主机和端口) str ...

  4. css笔记19：浮动的案例

    案例一: 1. 首先是01.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. Android（java）学习笔记111：成员位置的内部类的介绍

    1.内部类的定义 /* 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. ...

  6. envi中selected rgb bands contain different spatial sizes

    是选择了不同的影像文件envi中selected rgb bands contain different spatial sizes

  7. python爬虫爬取全球机场信息

    --2013年10月10日23:54:43 今天需要获取机场信息,发现一个网站有数据,用爬虫趴下来了所有数据: 目标网址:http://www.feeyo.com/airport_code.asp?p ...

  8. Bootstrap插件之Carousel轮播效果（2015年-05月-21日）

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  9. Java Concurrency - Condition

    Condition 将 Object 监视器方法(wait.notify 和 notifyAll)分解成截然不同的对象,以便通过将这些对象与任意 Lock 实现组合使用,为每个对象提供多个等待池(wa ...

  10. django 学习-4 模板标签

    1.第一个标签是 if 标签 vim  learn/home.html <!DOCTYPE html><html><head>        <title&g ...