<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. PHP 获取linux服务器性能CPU、内存、硬盘、进程等使用率

    数据库配置文件: conn.php <?php define("MONITORED_IP", "172.16.0.191"); //被监控的服务器IP地址 ...

  2. 配置Raspbian 启用SPI I2C

    sudo vi /etc/modprobe.d/raspi-blacklist.conf 找到这两行 blacklist spi-bcm2708 blacklist i2c-bcm2708 注释掉 # ...

  3. label 和 legend标签的用法

    label 和 legend标签的用法 label标准用法: 一般浏览器都支持 一般而言,label标签位于表单元素的前面或者后面,为控件提供说明文字 <label for="user ...

  4. 看日记学git摘要~灰常用心的教程

    看日记学git linux 命令行 cd ls / ls -a clear mkdir rmdir echo "hi, good day" > hi.txt touch he ...

  5. Stitch Fix 融资1200万美元，又一个时尚创业的哈佛女MBA |华丽志

    Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA |华丽志 Stitch Fix 融资1200万美元,又一个时尚创业的哈佛女MBA

  6. jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...

  7. android UI跨线程操作

    android应用程序也是单线程程序,主线程为UI线程. android 线程是非安全的,即不要在子线程中更新 UI. public class MasterActivity extends Acti ...

  8. HTML5API___Web Storage

    Web Storage 是html5的本地存储规范 支持:移动平台基本支持 (opera mini除外) ie8+ff chrome 等 支持 它包含2个: sessionStorage 会话存储   ...

  9. js 触摸事件

    js触摸事件 应用在移动端 webkit内核都支持. 触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html 事件 ...

  10. css代码优化篇

    心情比较不咋地,不想说什么了 代码演示如下: 不推荐 .fw-800 { font-weight: 800; } .red { color: red; } 推荐 .heavy { font-weigh ...