<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css横向下拉菜单演示</title>
<style type="text/css">

*{margin:0;padding:0;border:0;}
body {
 font-family: arial, 宋体, serif;
        font-size:12px;
}

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

#nav a {
 display: block; width: 80px; text-align:center;
}

#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visited  {
 color:#666;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
 float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
 background:#999;
}
#nav li ul {
 line-height: 27px;  list-style-type: none;text-align:left;
 left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
 float: left; width: 180px;
 background: #F6F6F6;
}

#nav li ul a{
 display: block; width: 180px;w\idth: 156px;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:#C00;
}

#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left;
}
 
</style>

<script type="text/javascript"><!--    //--><![CDATA[//><!--
    function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[i].onMouseDown = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[i].onMouseUp = function () {
                this.className += (this.className.length > 0 ? " " : "") + "sfhover";
            }
            sfEls[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>
<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>
 </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="#">我们四111</a></li>
 </ul>
</li>
</ul>
</body>
</html>

javascript 横向下拉菜单演示的更多相关文章

  1. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  2. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  3. javascript实现下拉菜单的显示与隐藏

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  5. Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)

    详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  6. javascript简易下拉菜单效果

    JS代码: window.onload=function(){ var oDiv=document.getElementById('navMenu'); var aUl=oDiv.getElement ...

  7. bootstrap-js(2)下拉菜单

    1.下面的实例演示了在导航栏内和标签内的下拉菜单的用法: <!DOCTYPE HTML><html><head><link href="/style ...

  8. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  9. Bootstrap-Plugin：下拉菜单（Dropdown）插件

    ylbtech-Bootstrap-Plugin:下拉菜单(Dropdown)插件 1.返回顶部 1. Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了 ...

随机推荐

  1. IronPython初体验和实战集合等类型转换和类型匹配

    人老了,做什么都累~学到了这么多技术,从最早C到C++再到JAVA再到C#,最终都是为了改善产品,改善系统的可维护性.众所周知C#,C++,C都是强类型语言,什么情况都得定义一些实体类来改变业务模型, ...

  2. 使用Qt 开发图形界面的软件（尘中远）

    3DSlicer, a free open source software for visualization and medical image computing AcetoneISO:镜像文件挂 ...

  3. Netbeans搭建Android环境

    原文:Netbeans搭建Android环境 Netbeans环境的搭建主要依赖于NBAndroid插件,项目地址: http://www.nbandroid.org/p/installation.h ...

  4. 使用ssh无密码登录

    使用ssh无密码登录 ssh 是一个专为远程登录会话和其他网络服务提供安全性的协议.默认状态下ssh链接是需要密码认证的,可以通过添加系统认证(即公钥-私钥)的修改,修改后系统间切换可以避免密码输入和 ...

  5. 求最小的k个数

    和高速排序有点类似,利用高速排序的划分算法, 划分算法见http://blog.csdn.net/buyingfei8888/article/details/8997803 依据int partiti ...

  6. tomcat 7 无法打开管理页面

    在配置文件tomcat-users.xml中添加如下内容即可. <role rolename="admin"/> <role rolename="man ...

  7. Mysql 正则表达式 判断字段值不包含数字

    SELECT * FROM (select replace(FlightId_IaTa,LEFT(FlightId_IaTa,2),'') as aa,FlightId_IaTa,FlightIdfr ...

  8. connot find one or more components. please reinstall the application

    正在用 Visual Studio 2013 写程序,程序一直执行正常. 此时,手动把注册表"HKEY_USERS"的当前用户的权限删除.再运行程序会提示:“是否继续并运行上次的成 ...

  9. 谈如何使用c中的qsort快速排序库函数 按主次关键字正确排序

    快排的效率很快,但是我们很少知道如何利用它进行多关键字排序,比如我想对一个数组a[i][0]进行的一个元素进行主关键字排序,又想对a[i][1]进行次关键字排序.那么接下来就是解决这个问题的方法. 学 ...

  10. 【转】CoreData以及MagicalRecord （二）

    3. 运行时类与对象 NSManagedObject Managed Object 表示数据文件中的一条记录,每一个Managed Object在内存中对应的实体(Entity)的一个数据表示.Man ...