这是简单的下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>JavaScript下拉菜单</title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        body {

            font-family: verdana, sans-serif;

            font-size: small;

        }

        #navigation, #navigation li ul {

            list-style-type: none;

        }

        #navigation {

            margin: 20px;

        }

            #navigation li {

                float: left;

                text-align: center;

                position: relative;

            }

                #navigation li a:link, #navigation li a:visited {

                    display: block;

                    text-decoration: none;

                    color: #000;

                    width: 120px;

                    height: 40px;

                    line-height: 40px;

                    border: 1px solid #fff;

                    border-width: 1px 1px 0 0;

                    background: #c5dbf2;

                    padding-left: 10px;

                }

                #navigation li a:hover {

                    color: #fff;

                    background: #2687eb;

                }

                #navigation li ul li a:hover {

                    color: #fff;

                    background: #6b839c;

                }

                #navigation li ul {

                    display: none;

                    position: absolute;

                    top: 40px;

                    left: 0;

                    margin-top: 1px;

                    width: 120px;

                }

                    #navigation li ul li ul {

                        display: none;

                        position: absolute;

                        top: 0px;

                        left: 130px;

                        margin-top: 0;

                        margin-left: 1px;

                        width: 120px;

                    }

    </style>

    <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

</head>

<body>

    <!-- style="display:inline-block;"-->

    <div style="border: 3px solid red;">

        <ul id="navigation">

            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                <a href="#">栏目1</a>

                <ul>

                    <li><a href="#">栏目1->菜单1</a></li>

                    <li><a href="#">栏目1->菜单2</a></li>

                    <li><a href="#">栏目1->菜单3</a></li>

                    <li><a href="#">栏目1->菜单4</a></li>

                </ul>

            </li>

            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                <a href="#">栏目2</a>

                <ul>

                    <li><a href="#">栏目2->菜单1</a></li>

                    <li><a href="#">栏目2->菜单2</a></li>

                    <li><a href="#">栏目2->菜单3</a></li>

                    <li><a href="#">栏目2->菜单4</a></li>

                    <li><a href="#">栏目2->菜单5</a></li>

                </ul>

            </li>

            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                <a href="#">栏目3</a>

                <ul>

                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                        <a href="#">栏目3->菜单1</a>

                        <ul>

                            <li><a href="#">菜单1->子菜单1</a></li>

                            <li><a href="#">菜单1->子菜单2</a></li>

                            <li><a href="#">菜单1->子菜单3</a></li>

                            <li><a href="#">菜单1->子菜单4</a></li>

                        </ul>

                    </li>

                    <li><a href="#">栏目3->菜单2</a></li>

                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

                        <a href="#">栏目3->菜单3</a>

                        <ul>

                            <li><a href="#">菜单3->子菜单1</a></li>

                            <li><a href="#">菜单3->子菜单2</a></li>

                            <li><a href="#">菜单3->子菜单3</a></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

html下拉菜单的实现的更多相关文章

  1. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  2. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  3. Bootstrap3系列：下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  4. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  5. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  6. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  7. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  8. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  9. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  10. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

随机推荐

  1. 使用zookeeper实现分布式锁

    简介: 核心是解决资源竞争的问题 分布式系统中经常需要协调多进程或者多台机器之间的同步问题,得益于zookeeper,实现了一个分布式的共享锁,方便在多台服务器之间竞争资源时,来协调各系统之间的协作和 ...

  2. 6-02使用SQL语句向表中插入数据

    插入语句的语法: INSERT INTO 表() VALUES(值列表) 注意事项: 1:每次插入一行数据,不能只插入半行或几列数据. 2:每一个数据值的数据类型.精度和小数位数必须与相应的列匹配. ...

  3. 第三篇：用SOUI能做什么？

    SOUI-DEMO界面预览 在回答SOUI能做什么之前,先看看SVN中demo工程的界面截图: 使用SOUI实现上面的界面主要的工作全在配置几个XML文件,基本不需要写C++代码.(如何配置XML布局 ...

  4. 在64位Win7中使用Navicat Premium 和PL\SQL Developer连接Oracle数据库备忘

    最近接手了一个项目,服务器端数据库是oracle 11g 64位.由于主要工作不是开发,也不想在自己的电脑上安装庞大的oracle数据库,因此寻思着只通过数据库管理工具连接数据库进行一些常用的查询操作 ...

  5. css中box-shadow阴影效果的使用

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  6. 【maven】maven各种奇葩问题

    问题1:Could not calculate build plan: Plugin org.apache... 不能成功创建maven项目 解决方法1: http://repo1.maven.org ...

  7. java 中 静态块的作用

    (一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序 ...

  8. XSS攻击&SQL注入攻击&CSRF攻击？

    - XSS(Cross Site Script,跨站脚本攻击)是向网页中注入恶意脚本在用户浏览网页时在用户浏览器中执行恶意脚本的攻击方式.跨站脚本攻击分有两种形式:反射型攻击(诱使用户点击一个嵌入恶意 ...

  9. 常用meta标签举例说明

    本文是作者从百度百科和其他从网页中搜索到的资料,经综合整理,把常用meta标签列举并示例说明,仅供参考. 1.<meta charset="UTF-8"> --- ch ...

  10. AngularJS学习之Select（选择框）

    1.AngularJS可以使用数组或对象创建一个下拉列表选项: 2.在AngularJS中我们可以使用ng-option指令创建一个下拉列表:列表项通过对象和数组循环输出: <div ng-ap ...