zoukankan      html  css  js  c++  java
  • 纯css和js版下拉菜单

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css版下拉菜单</title>
    <style type="text/css">
    div,body,ul,li{padding:0;margin:0; list-style:none;}
    .all{550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
    li{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:0; top:30px; display:none;}
    .ceshi{800px; height:100px; background:gold; margin:0 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:0;margin:0; list-style:none;}
    .all{550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
    li{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:0; top:30px; display:none;}
    .ceshi{800px; height:100px; background:gold; margin:0 auto;}
    </style>
    <script>
    window.onload=function()
    {
        var oMenu=document.getElementById('menu');
        var aLi=oMenu.children;
        var aUl=oMenu.getElementsByTagName('ul');
        for(var i=0;i<aLi.length;i++)
        {
            aLi[i].index=i;
            aLi[i].onmouseover=function()
            {
                for(var i=0;i<aUl.length;i++)//首先是先排除再选择自己
                    {
                        aUl[i].style.display='none';
                    }
                    aUl[this.index].style.display='block';
            }
            aLi[i].onmouseout=function()
            {
                for(var i=0;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>
  • 相关阅读:
    网页请求过滤器Filter
    高级查询
    SQL编程
    数据库的实现
    数据库设计
    使用ADO.NET查询和操作数据
    使用ADO.NET访问数据库
    深入C#中的String类
    使用属性升级MyBank
    C#语法快速热身
  • 原文地址:https://www.cnblogs.com/heboliufengjie/p/4150178.html
Copyright © 2011-2022 走看看