<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css版下拉菜单</title>

<style type="text/css">

div,body,ul,li{padding:;margin:; list-style:none;}

.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}

li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}

ul ul li{color:red;}

ul ul{position:absolute; left:; top:30px; display:none;}

.ceshi{width:800px; height:100px; background:gold; margin: auto;}

.all li:hover ul{display:block;}//ie6死了，可以正大光明不考虑兼容问题了，可以放心使用伪类了

</style>

</head>

<body>

<div class="all">

    <ul>

        <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>网页设计

            <ul>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li>ui设计

            <ul>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li>动画设计

            <ul>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li>js特效

            <ul>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

    </ul>

</div>

<div class="ceshi">测试用</div>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js版下拉菜单</title>

<style type="text/css">

div,body,ul,li{padding:;margin:; list-style:none;}

.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}

li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}

ul ul li{color:red;}

ul ul{position:absolute; left:; top:30px; display:none;}

.ceshi{width:800px; height:100px; background:gold; margin: auto;}

</style>

<script>

window.onload=function()

{

    var oMenu=document.getElementById('menu');

    var aLi=oMenu.children;

    var aUl=oMenu.getElementsByTagName('ul');

    for(var i=;i<aLi.length;i++)

    {

        aLi[i].index=i;

        aLi[i].onmouseover=function()

        {

            for(var i=;i<aUl.length;i++)//首先是先排除再选择自己

                {

                    aUl[i].style.display='none';

                }

                aUl[this.index].style.display='block';

        }

        aLi[i].onmouseout=function()

        {

            for(var i=;i<aUl.length;i++)

                {

                    aUl[i].style.display='none';

                }

        }

    }

};

</script>

</head>

<body>

<div class="all">

    <ul id="menu">

        <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>网页设计

            <ul>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

                <li><a href="#">二级菜单</a></li>

            </ul>

        </li>

        <li>ui设计

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

        <li>动画设计

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

        <li>js特效

            <ul>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ul>

        </li>

    </ul>

</div>

<div class="ceshi">测试用</div>

</body>

</html>

纯css和js版下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  3. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  5. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

  8. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  9. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

随机推荐

  1. ubuntu下如何修改时区和时间

    1.修改时区 sudo tzselect (按提示选择即可) sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2. 修改时间 sudo ...

  2. HDU 1848 Fibonacci again and again（SG函数入门）题解

    思路:SG打表 参考:SG函数和SG定理[详解] 代码: #include<queue> #include<cstring> #include<set> #incl ...

  3. [Shiro] - Shiro之进阶

    上一个知识点ssm, 哪里需要权限,哪里写注解@RequirePermission就行. 但是,真正项目开发的时候, 这种方式就很有局限性了, 当权限配置关系发生变化, 每次都要修改代码, 编译打包重 ...

  4. Qt5.2+opencv2.4.9配置安装过程

    Qt5.2+Opencv2.4.9的安装与配置 安装环境 Win10系统 Qt5.2.0 Opencv2.4.9 1. 安装Qt5.2.0 安装在D:\Qt\5.2.0文件夹(记为A文件夹) Qt下载 ...

  5. POJ 1011 Sticks（dfs+剪枝）

    http://poj.org/problem?id=1011 题意:若干个相同长度的棍子被剪成若干长度的小棍,求每根棍子原来的可能最小长度. 思路:很经典的搜索题. 我一开始各种超时,这题需要很多剪枝 ...

  6. UVa 1590 IP网络(简单位运算)

    Description   Alex is administrator of IP networks. His clients have a bunch of individual IP addres ...

  7. 机器学习-数据可视化神器matplotlib学习之路（二）

    之前学习了matplotlib的一些基本画图方法(查看上一节),这次主要是学习在图中加一些文字和其其它有趣的东西. 先来个最简单的图 from matplotlib import pyplot as ...

  8. python unicode

    >>> a="jkjjhhjjj" >>> a_uni = a.decode('utf-8') >>> type(a_uni) ...

  9. Python 以指定宽度格式化输出

    当对一组数据输出的时候,我们有时需要输出以指定宽度,来使数据更清晰.这时我们可以用format来进行约束 mat = "{:20}\t{:28}\t{:32}" print(mat ...

  10. 电脑上装两个JDK的方法

    在window操作系统上配置两个JDK方便开发以及新JDK的学习 我的机子上的JDk环境为1.8 在cmd中执行:java -version 查看JDK版本 安装方法 在系统变量中配置中设置JAVA_ ...