<!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. bzoj 3343: 教主的魔法

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 924  Solved: 402[Submit][Status][Discuss] Descriptio ...

  2. 使用CCleaner卸载chrome

    Google Chrome Update Patches Zero-Day Actively Exploited in the Wild 如果有同事使用google Chrome浏览器的话,请检查版本 ...

  3. winform中splitter的用法

    1.将winform分为三列 整个窗体分成可以自动调节的三列的做法:1.往窗体上丢两个panel控件其中:panelLeft——设置Dock属性为“left”,并调节好其宽度panelRight——设 ...

  4. Codeforces Round #530 (Div. 1)

    A - Sum in the tree 就是贪心选尽量让上面的点权尽量大,那么对于偶数层的点,其到根节点的和即为所有儿子中的最大值. #include<bits/stdc++.h> usi ...

  5. 项目梳理5——修改已生成.nuspec文件

    xxxx.nuspec格式如下 <?xml version="1.0"?> <package > <metadata> <id>$i ...

  6. BZOJ 2339 【HNOI2011】 卡农

    题目链接:卡农 听说这道题是经典题? 首先明确一下题意(我在这里纠结了好久):有\(n\)个数,要求你选出\(m\)个不同的子集,使得每个数都出现了偶数次.无先后顺序. 这道题就是一道数学题.显然我们 ...

  7. MySQL会创建临时表的几种情况

    1.UNION查询: 2.用到TEMPTABLE算法或者是UNION查询中的视图: 3.ORDER BY和GROUP BY的子句不一样时: 4.表连接中,ORDER BY的列不是驱动表中的:(指定了联 ...

  8. Python的函数参数传递

    a = 1 def fun(a): a = 2 fun(a) print a # 1 a = [] def fun(a): a.append(1) fun(a) print a # [1]

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

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

  10. django路由转发

    一.路由转发 通常,我们会在每个app里,各自创建一个urls.py路由模块,然后从根路由出发,将app所属的url请求,全部转发到相应的urls.py模块中. 例如,下面是Django网站本身的UR ...