<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. ASP.NET MVC 之 路由配置

    主要操作在App_Start 目录下的 RouteConfig.cs 文件. 一.Url构造方式 1.命名参数规范+匿名对象 routes.MapRoute( name: "Default& ...

  2. Modified LCS

    Input Output Sample Input 3 5 3 4 15 3 1 10 2 2 7 3 3 100 1 1 100 1 2 Sample Output 4 3 50超时代码,因为K很大 ...

  3. thymleaf分支用法

    <div th:switch="${user.role}"> <p th:case="'admin'">User is an admin ...

  4. [转]"Windows Phone 7程序设计”完全版电子书可以免费下载了

    本文转自:http://www.cnblogs.com/salam/archive/2010/10/29/1864246.html 现在学习Windows Phone 7开发资料十分有限,除了MSDN ...

  5. 关于Windows下如何查看端口占用和杀掉进程

    更详细博客参见: http://www.cnblogs.com/chenwenbiao/archive/2012/06/24/2559954.html 或可参考:http://www.cnblogs. ...

  6. Git CMD - add: Add file contents to the index

    命令格式 git add [--verbose | -v] [--dry-run | -n] [--force | -f] [--interactive | -i] [--patch | -p] [- ...

  7. 也谈Asp.net 中的身份验证

    钱李峰 的这篇博文<Asp.net中的认证与授权>已对Asp.net 中的身份验证进行了不错实践.而我这篇博文,是从初学者的角度补充了一些基础的概念,以便能有个清晰的认识. 一.配置安全身 ...

  8. 关于微信response_type参数错误

    可能出现问题的几个原因: 1.正确的2.0auth的地址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=1%&redire ...

  9. Android 第三方授权(微信篇)

    0.申请开发者: https://open.weixin.qq.com/cgi-bin/frame?t=home/app_tmpl&lang=zh_CN 1.下载sdk包: https://o ...

  10. hive 未初始化元数据库报错

    启动hive-metastore和hive-server2 用beeline连接hive报错 [root@node04 hive]# beeline Beeline version 0.13.1-cd ...