<!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. CRC32是什么？

    CRC32:CRC本身是“冗余校验码”的意思,CRC32则表示会产生一个32bit(8位十六进制数)的校验值.由于CRC32产生校验值时源数据块的每一个bit(位)都参与了计算,所以数据块中即使只有一 ...

  2. 在CentOS Linux系统上，添加新的端口，启用ssh服务

    SSH作为Linux远程连接重要的方式,如何配置安装linux系统的SSH服务,如何开启SSH? SSH是什么? SSH 为 Secure Shell 由 IETF 的网络工作小组(Network W ...

  3. Wireshark 显示域名列

    一般使用Wireshark只能看到ip地址,但是看域名更方便更简明 只要修改一个配置就可以 编辑-->首选项 勾选Resolve network(IP) addresses 重新捕捉:

  4. JavaScript 时间格式

    方法1: Date.prototype.Format = function (fmt) { var o = { , //月份 "d+": this.getDate(), //日 = ...

  5. [bzoj 1616][Usaco2008 Mar]Cow Travelling游荡的奶牛

    题目描述 奶牛们在被划分成N行M列(2 <= N <= 100; 2 <= M <= 100)的草地上游走,试图找到整块草地中最美味的牧草.Farmer John在某个时刻看见 ...

  6. Facebook广告API系列 1

    Facebook广告API系列 1 前言 最近遇到大坑了,居然要去对接facebook的广告API,之前以为是跟鹅厂一样的API体系,看了半天Facebook的文档,冷汗直冒.... 这得一点一点的讲 ...

  7. BFS-迷宫问题-用宽度(广度)优先搜索解决最优路径问题

    题目: 给定一个大小为 N×M 的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格 的通道移动.请求出从起点到终点所需的最小步数.请注意,本题假定从起点一定可以移动 到终点. 限制条件;N, ...

  8. JS利用正则配合replace（）函数替换指定字符

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp,replacement) ...

  9. HDU 3586 Information Disturbing（二分+树形dp）

    http://acm.split.hdu.edu.cn/showproblem.php?pid=3586 题意: 给定一个带权无向树,要切断所有叶子节点和1号节点(总根)的联系,每次切断边的费用不能超 ...

  10. ubuntu16.04, git 的配置

    1.下载git:sudo apt-get install git 2.生成公钥:ssh-keygen -t rsa -C  '你的邮箱'     ,不停回车即可 3. mkdir test cd te ...