<!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. NOIP模拟题 2017.7.3 - 模拟 - 贪心 - 记忆化搜索

    直接暴力模拟,注意判数据结构为空时的取出操作. Code #include<iostream> #include<cstdio> #include<ctime> # ...

  2. Python3基础 __delattr__ 在一个属性被删除时的行为

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. DHacker 汉化

  4. win10 字体渲染优化 色彩调整

    最近烧包买了个2k显示器,发现跟win10使用,一堆问题,最大的就是字体,其实应该买4k,那样正好设置200%字体,现在设置的124% 字体: 以前使用的是mactype这个软件 https://pa ...

  5. |和||以及&和&&

    https://msdn.microsoft.com/en-us/library/6a71f45d.aspx Logical OR Operator 按位或 This operator has hig ...

  6. CodeForces 1029E div3

    题目链接 第一道场上自己做出来的E题...虽然是div3,而且是原题... 当时做完ABC,D题没有思路就去怼E了,然后发现貌似原题? 事实上就是原题... 给个原题链接... [HNOI2003]消 ...

  7. hdu 2586 How far away ？ 带权lca

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) P ...

  8. pyqt 实现的俄罗斯方块

    from PyQt5.QtWidgets import QMainWindow, QFrame, QDesktopWidget, QApplication from PyQt5.QtCore impo ...

  9. Admin管理后台

    Django奉行Python的内置电池哲学.它自带了一系列在Web开发中用于解决常见问题或需求的额外的.可选工具.这些工具和插件,例如django.contrib.redirects都必须在setti ...

  10. C# ref和out的本质

    ref和out参数的效果一样,都是通过关键字找到定义在主函数里面的变量的内存地址,并通过方法体内的语法改变它的大小.不同点就是输出参数必须对参数进行初始化.输出参数和引用参数的区别:从CLR的角度来看 ...