<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_InvokeAll_又返回值_多个线程同时执行，取消超时线程

    package com.demo.test4; import java.util.ArrayList; import java.util.List; import java.util.concurre ...

  2. C#_Fileuploadify_notMvc_description

    Uploadify Version 3.2 Options选项设置 auto 选择文件后自动上传 buttonClass 给“浏览按钮”加css的class样式 buttonCursor 鼠标移上去形 ...

  3. Spring 中JCA CCI分析--转载

    转载地址:http://blog.csdn.net/a154832918/article/details/6790612 J2EE提供JCA(Java Connector Architecture)规 ...

  4. c语言数组的初始化

    #include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...

  5. IOS网络请求框架AFNetworking和ASIHttpRequest对比

    ASI基于CFNetwork框架开发,而AFN基于NSURL. ASI更底层,请求使用创建CFHTTPMessageRef进行,使用NSOperationQueue进行管理,ASIHTTPReques ...

  6. W3C XML Schema 教程

    转自:http://www.blogjava.net/sham2k/articles/179825.html W3C XML Schema 教程 XML SCHEMA教程 本教程是笔者学习W3C的&l ...

  7. 沈逸老师ubuntu速学笔记（1）--安装flashplayer，配置中文输入法以及常用命令

    开篇首先感谢程序员在囧途(www.jtthink.com)以及沈逸老师,此主题笔记主要来源于沈老师课程.同时也感谢少年郎,秦少.花旦等同学分享大家的学习笔记. 1.安装flash player ctr ...

  8. Oracle查询被锁的表及进程的方法

    Oracle查询可以有多种方法,下面为您介绍的是如何Oracle查询被锁的表及Oracle查询连接的进程的方法,希望对您能够有所帮助. 一.查看被锁的表 select p.spid,a.serial# ...

  9. oracle的nvl和sql server的isnull

    最近公司在做Oracle数据库相关产品,在这里作以小结: ISNULL()函数 语法    ISNULL ( check_expression , replacement_value) 参数    c ...

  10. JS中的嵌套作用域

    在JS中仅仅区分全局变量和局部变量还不够,实际上,变量作用域可以有任意层级(嵌套).其他函数内部定义的函数可以调用父函数的局部变量,而内部函数里定义的函数则不仅可以调用父函数的局部变量,还可以调用祖父 ...