<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
    <head>
        <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src=""></script><!--引入的js  src是引入的js样式路径-->
        <link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
        <!--当前页面的三要素-->
        <title>示例-导航</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">

        <!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0}
            body{font-family:"微软雅黑";font-size:14px;}
            .wf_cont{width:400px;height:600px;margin:100px auto;}
            a{text-decoration:none;}
            ul li{list-style-type:none;}
            nav{width:208px;height:;margin:10px auto;}
            nav>ul>li{background:#C6321F;}
            nav>ul>li>a{color:#fff;line-height:40px;padding-left:15px;box-shadow:0 1px 1px #d03b39 inset;border-bottom:1px solid #9llclc;
            display:block;height:40px;
            font-weight:700;
            position:relative;
            }
            nav>ul>li>a>span{
                position:absolute;
                right:10px;top:8px;
                padding:2px 5px;
                height:20px;
                background:#9e1919;
                line-height:20px;
                color:#f67d7b;
                font-weight:none;
            }
            nav>ul>li>a:hover{background:#D53A27;}
            nav>ul>li>a:hover span{color:#fff;}
            nav>ul>li>ul{
                background:#9A2817;
            }
            nav>ul>li>ul>li>a {
                color:#d4f4f4;
                height:35px;
                line-height:35px;
                padding-left:15px;
                display:block;
                border-bottom:1px solid #821717;
            }
            nav>ul>li>ul>li>a:hover{
                background:#FF7400;
                color:#fff;
            }
            nav>ul>li>ul{
                height:0;overflow:hidden;
            }
            /*css 鼠标点击事件*/
            nav>ul>li:target ul{
                       height:auto;
            }
        </style>
    </head>
<body>
<div class="wf_cont">
    <nav>
        <ul><!--通过点击li 》 nav1 》#nav1 改变ul高度-->
            <li id="nav1">
                <a href="#nav1">IT培训 <span class="navmore">更多</span></a>
                <ul>
                    <li><a  target="_balank"href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav2">
                <a href="#nav2">中小学/大学<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav3">
                <a href="#nav3">亲子课堂<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
            <li id="nav4">
                <a href="#nav4">语言培训<span class="navmore">更多</span></a>
                <ul>
                    <li><a href="javascript:void(0)">网页制作</a></li>
                    <li><a href="javascript:void(0)">java</a></li>
                    <li><a href="javascript:void(0)">C++</a></li>
                    <li><a href="javascript:void(0)">Mysql</a></li>
                    <li><a href="javascript:void(0)">javascript</a></li>
                    <li><a href="javascript:void(0)">jquery</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
</body>
</html>

posted on 2016-08-17 11:50  代码颠覆  阅读(792)  评论(0编辑  收藏  举报