<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. SQL 简单练习

    USE study; SELECT * FROM EMP --查询雇员姓名的最后三个字母 ) FROM EMP ; --查询10部门雇员进入公司的星期数 --1 查询部门30中的所有员工 --2 列出 ...

  2. python进阶1--数据库支持

    数据库支持 1.连接和游标 1)connect函数,该函数有多个参数,而具体使用那个参数取决于数据库.--连接数据库 常用参数: dsn:数据源名称 user:用户名 password:用户密码 ho ...

  3. 微软提供的虚拟磁盘API

    https://msdn.microsoft.com/en-us/library/windows/desktop/dd323684(v=vs.85).aspx https://msdn.microso ...

  4. VS2015如何另存解决方案文件-修改解决方案sln文件的路径

    原文:VS2005如何另存解决方案文件-修改解决方案sln文件的路径 修改解决方案sln文件的路径 方法一:工具→选项→项目和解决方案,可设置项目的默认保存位置.方法二:"解决方案资源管理器 ...

  5. 10491 - Cows and Cars

    描述:要么全选择牛,要么选择一辆车和p-1头牛,那么剩下n+m-p道门可以选择,求选择p道门以后要选择到车的概率 #include <cstdio> int main() { //freo ...

  6. 设计模式入门之桥接模式Bridge

    Abstraction:抽象部分的父类,定义须要实现的接口.维护对实现部分的引用,从而把实现桥接到Implementor中去 Implementor:实现部分的接口 RefinedAbstractio ...

  7. 获取ubuntu 的root密码，告别sudo

    刚刚开始使用ubuntu的朋友可能知道一个提权命令    sudo 如果你接触过其他的Linux系统的话,你会知道  linux系统有一个最高权限   root.一般用su root,然后输入密码就可 ...

  8. Javascript Duff装置 循环展开(Javascript Loop unrolling Duff device)

    Javascript 中会用到for 循环,当要循环的数据记录很多的时候,可能会对性能产生很大影响.这时我们可以考虑展开for循环,这时就要用到Duff装置(Duff Device). 先来看一个小例 ...

  9. KeCode对照表（键盘按键的获取）

    KeyCode键盘对照表: http://www.cnblogs.com/furenjian/articles/2957770.html

  10. 前缀 树 背单词(Remember the Word,LA 3942)

    已哭瞎. 搞了2个多小时的错误居然是在  没有初始化............教训:每个例子一定要考虑到初始化问题.! 每个节点存了一个数组  该数组记录的有26个大小  0-25分别表示记录表示'a' ...