手机端 | 加入收藏 | 设为首页 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页 > 下载中心 > 代码特效
1861资源网 免费发布信息
软件名称: CSS横向二级菜单_菜单导航特效
文件类型:
界面语言: 简体中文
软件类型: 国产软件
运行环境:
授权方式: 共享软件
软件大小:
软件等级:
软件登陆: zywlyy
作 者 :
官方网址: 官方站
程序演示: 演示
整理时间: 2024-11-18
软件简介:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>二级横向菜单</title>
    <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
    <script type="text/javascript">
    startList = function() {
        if (document.all && document.getElementById) {
            navRoot = document.getElementById("nav");
                for (i=0; i < navRoot.childNodes.length; i++) {
                    node = navRoot.childNodes[i];
                    if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                        this.className+=" over";
                    }
                    node.onmouseout=function() {
                        this.className=this.className.replace(" over", "");
                    }
                }
            }
        }
    }
    window.onload = startList;
    </script>
    <style type="text/css" media="all">
    html {min-width: 742px;}
    img{border:0;}
    p.access {display:none;}
    div#counters{display:none;}
    a{text-decoration: none;}
    body{
        overflow:auto;
        text-align: center;
        margin: 0 auto;
        padding: 0;
        border: 0;
    }
    ul#nav,ul#nav ul{
        margin: 0 auto;
        text-align:left;
        padding: 0;
        list-style: none;
        background:#fff;
        z-index:99;
    }
    ul#nav {
        width:732px;
        display:block;
        height:24px;
        clear:both;
    }
    ul#nav li {
        position: relative;
        z-index:999;
        float:left;
    }
    ul#nav ul li{
        display:block;
    }
    ul#nav ul {
        width:100px;
        height:auto;
        position: absolute;
        text-align:left;
        left: 0px;
        display: none;
        border:solid 1px #697210;
    }
    ul#nav li.over a,ul#nav li:hover a{
        border-color:#E2144A;
        background: #fdd;
        font-weight:bold;
        color: #E2144A;
    }
    ul#nav li.over ul a,ul#nav li:hover ul a{
        background:#fff;
        font-weight:normal;
        color:#777;
    }
    ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover{
        background:#fff;
        font-weight:normal;
        color: #E2144A;
        background: #fdd;
        border-color:#E2144A;
        font-weight:bold;
    }

    ul#nav a {
        font-size:14px;
        line-height:17px;
        display: block;
        padding:0 0 0 10px;
        width:78px;
        color: #777;
        height:17px;
        background: #fff;
        border-left:solid 1px #fff;
        border-top:solid 1px #fff;
        border-right:solid 1px #fff;
        border-bottom:solid 5px #697210;
    }
    ul#nav ul li{
        width:100px;
        border:0;
    }
    /* Fix IE. Hide from IE Mac */
    * html ul#nav li { float: left; height: 17px; }
    * html ul#nav li a {  height: 17px; }
    ul#nav ul a { padding: 2px 0px 2px  10px;border:0;width:90px; } 
    ul#nav li:hover ul,ul#nav  li.over ul { display: block; } 
    </style>
    </head>
    <body>
    <p>一款面试时写的菜单</p>
    <ul id="nav">
        <li><a href="#">文章</a>
            <ul>
                <li><a href="#">随笔</a></li>
                <li><a href="#">小说</a></li>
            </ul>
        </li>
        <li><a href="#">设计</a>
            <ul>
                <li><a href="#">漫画</a></li>
                <li><a href="#">摄影</a></li>
                <li><a href="#">图文</a></li>
            </ul>
        </li>
        <li><a href="#">资源</a>
            <ul>
                <li><a href="#">代码</a></li>
                <li><a href="#">素材</a></li>
            </ul>
        </li>
        <li><a href="#">收藏夹</a></li>
        <li><a href="#">爱好</a>
            <ul>
                <li><a href="#">哲学</a></li>
                <li><a href="#">小说</a></li>
            </ul>
        </li>
        <li><a href="#"'>日记</a>
            <ul>
                <li><a href="#">生活</a></li>
                <li><a href="#">工作</a></li>
            </ul>
        </li>
        <li><a href="#">日程</a>
            <ul>
                <li><a href="#"'>计划事项</a></li>
                <li><a href="#">已做事项</a></li>
            </ul>
        </li>
        <li><a href="#">其他</a>
            <ul>
                <li><a href="#">关于</a></li>
                <li><a href="#">留言</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
下载地址:
下载帮助: 发表评论 加入收藏夹 错误报告
相关软件: 无相关信息
下载说明: ⊙推荐使用网际快车下载本站软件,使用 WinRAR v3.10 以上版本解压本站软件。
⊙如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
⊙下载本站资源,如果服务器暂不能下载请过一段时间重试!
⊙如果遇到什么问题,请到本站去咨寻,我们将在那里提供更多 、更好的资源!
⊙本站提供的一些商业软件是供学习研究之用,如用于商业用途,请购买正版。
免责说明:

免责声明
免责声明:以上所展示的信息由会员自行提供,内容的真实性、准确性和合法性由发布会员负责,www.zywlyy.cn 对此不承担任何责任。如有侵犯您的权益,请来信通知删除。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐下载
最后更新
热门点击
返回顶部