<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. H3C交换配置PBR最佳实践

    简要说明 PBR算是比较常用的功能,需要我们去掌握一下 配置步骤简要 配置BFD 配置track 配置acl 配置policy-based-route 在接口上面应用policy-based-rout ...

  2. MYSQL 的数据读取方式

    例子: create table T(X bit(8)); insert into T (X) values(b'11111111'); select X from T; 这个时候会发现这个X 是乱码 ...

  3. android小知识之自定义通知（toast）

    Toast是较为熟悉的通知,但默认方式比较单调,可以根据自己的需求自定义,在统一UI风格的时候可以单独拿出来做一个工具类来使用. 下面我在Fragment中定义的一个按键弹出自定义Toast,在Act ...

  4. 深入浅出Mybatis系列（八）---mapper映射文件配置之select、resultMap good

    上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之insert.update.delete>介绍了insert.update.delete的用法,本篇将介绍select ...

  5. java多线程同步

    一篇好文:java多线程机制同步原则 概括起来说,Java 多线程同步机制主要包含如下几点:1:如果一个类包含一个或几个同步方法,那么由此类生成的每一个对象都配备一个队列用来容纳那些等待执行同步的线程 ...

  6. Open virtual effects in Ubuntu 12.04LTS

    Need install below packages: compiz compiz-core compiz-fusion-plugins-extra+ compiz-fusion-plugins-m ...

  7. cocos2d-x 3.1 集成 云风pbc

    cocos2d-x 3.x版本号变动比較大,从改用cmake管理整个项目,到使用python集成一体化的项目工具. 这些都是我喜欢的.我能够非常easy的在我的ubuntu上面搭建好开发环境,并且根本 ...

  8. 替换Avada主题的Google字体

    刚玩WP的时候图省事,在themeforest买了排行第一的主题Avada,虽然强大,但对我目前的Blog应用而言实在太'重'了.而且老外的主题很多方面不接地气,比如谷歌字体.本文指导各位如何在Ava ...

  9. 【Tomcat】使用Eclipse运行Tomcat7源码

    1.搭建开发环境 a.下载好tomcat7源码包 b.安装好jdk7,及设置好环境变量 c.安装好ant,及设置好环境变量,用于预编译tocmat源码. d.以上步骤准备好我们就可以开始进入源码的预编 ...

  10. If the server requires more time, try increasing the timeout in the server editor

    双击服务器,在overview下的Timeouts中的Start选项,改成10000或者较大就可以了.防止服务器自启动频繁.