这是简单的下拉菜单

<!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. C# SMTP邮件发送 分类： C# 2014-07-13 19:10 334人阅读 评论(1) 收藏

    邮件发送在网站应用程序中经常会用到,包括您现在看到的博客,在添加评论后,系统会自动发送邮件通知到我邮箱的,把系统发送邮件的功能整理了下,做了一个客户端Demo,希望对有需要的童鞋有所帮助: 核心代码: ...

  2. cdh环境下，spark streaming与flume的集成问题总结

    文章发自:http://www.cnblogs.com/hark0623/p/4170156.html  转发请注明 如何做集成,其实特别简单,网上其实就是教程. http://blog.csdn.n ...

  3. LoadRunner编程之跳出迭代

    LoadRunner编程之跳出迭代 51Testing软件测试网3p6pK.Yo LoadRunner中 提供了函数exit(-1)来结束迭代. 使用return 0 来结束本次迭代,进入下一次迭代. ...

  4. Python与Hack之Zip文件口令破解

    1.需要的库: **import zipfile**import optparse**from threading import Thread(1)zipfile:1.1 zipfile.ZipFil ...

  5. Codeforces Round #354 (Div. 2)-A

    A. Nicholas and Permutation 题目链接:http://codeforces.com/contest/676/problem/A Nicholas has an array a ...

  6. Floyd_Warshall POJ 3660 Cow Contest

    题目传送门 题意: m组关系,A能打败B,问最后有几头牛的排名能确定 分析:如果排名确定,那么能打败它的到它一定通,它到能打败的一定能通,也就是和为n-1.用Floyd的传递闭包 #include & ...

  7. Shell 编程基础之 Until 练习

    一.语法 until [ condition ] # 和while相反,当 condition 条件成立时,就终止回圈, 否则就持续进行回圈的程序段 do #执行内容 done 二.练习 输入用户输入 ...

  8. 在Revit中如何显示附件模块（Add Ins） 这个命令页？zz

      分类: 概念说明 Revit Revit界面编程 Revit 二次开发入门2013-08-22 13:58 1395人阅读 评论(9) 收藏 举报 在windows 7 32-bit OS 上装了 ...

  9. NUC_TeamTEST_C && POJ2299（只有归并）

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 42627   Accepted: 15507 ...

  10. Extjs用到的一些有用的网页的集锦

    1. extJS常用的4中Ajax异步提交 http://www.2cto.com/kf/201403/284083.html http://blog.csdn.net/goodshot/articl ...