导航条 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一步：导航条</title>
    <style type="text/css">
        ul{
            padding:0;
        }
        a{
            text-decoration:none;
        }
        #li1{
            width:80px;
            height:40px;
        }
        #a1{
            width:80px;
            height:40px;
            color: #fe6d3e;
            display:block;
            font-family:'微软雅黑';
            font-size:20px;
            text-align:center;
            line-height:40px;
        }
        .a2{
            width:80px;
            height:40px;
            display:block;
            font-family:'微软雅黑';
            font-size:20px;
            text-align:center;
            line-height:40px;
        }
        #ul2{
            display:none;
        }
        #ul2>li:hover a{
            background-color: #9d9aa1;
            color:#fefefe;
        }

    </style>
</head>
<body>
<ul>
    <li id="li1">
        <a href="#" id="a1">学科</a>
        <ul id="ul2">
            <li><a href="#" class="a2">语文</a></li>
            <li><a href="#" class="a2">数学</a></li>
            <li><a href="#" class="a2">英语</a></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    var oA1 = document.getElementById("a1");
    var oLi1 = document.getElementById("li1");
    var oUl2 = document.getElementById("ul2");
    var aLi = oUl2.getElementsByTagName("li");
        function show(){
            oA1.style.backgroundColor = '#7b7b8b';
            oA1.style.color = '#ffffff';
            oUl2.style.display = 'block';
        }
        function hide(){
            oA1.style.backgroundColor = '#ffffff';
            oA1.style.color = '#fe6d3e';
            oUl2.style.display = 'none';
        }
    oLi1.onmouseover =show;
    oLi1.onmouseout =hide;
</script>
</body>
</html>

 

posted on 2016-05-24 22:48  冬刻忆  阅读(70)  评论(0)    收藏  举报