1.左邊欄

css樣式

*{margin:0px;padding:0px;}
a{text-decoration:none;}
#menu{width:210px;height:468px;background:#C81623;position:relative;left:70px;top:120px;}
#menu ul li{list-style:none;width:100%;height:30px;/*background:blue;*/line-height:30px;}
#menu>ul>li{/*color:white;*/font-size:14px;/*font-size:16px;*//*font-family:微軟雅黑 ;*/font-family:microsoft yahei;}
#menu>ul>li>a{color:white;margin-left:10px;}
#menu>ul>li>span{float:right;margin-right:10px;color:#F7F7F7;}
#menu>ul>li:hover>a{color:#C81623;}
#menu>ul>li>ul{width:300px;height:468px;background:#CCC;/*display:none;*/position:absolute;top:0px;left:210px;display:none;}
#menu>ul>li>ul>li{height:30px;width:100%;}
#menu>ul>li>ul>li>a{color:black;margin-left:10px;}
div

<div id="menu">
        <ul>
            <li>
                <a href="#">家用電器</a><span>></span>
                <ul>[]
                    <li><a href="">大家電</a></li>
                    <li><a href="">小家電</a></li>
                    <li><a href="">生活電器</a></li>
                </ul>
            </li>
            <li>
                <a href="#">手機(jī)、數(shù)碼</a><span>></span>
                <ul>
                    <li><a href="">手機(jī)通訊</a></li>
                    <li><a href="">京東通訊</a></li>
                    <li><a href="">運(yùn)營(yíng)商</a></li>
                </ul>
            </li>
            <li><a href="#">電腦、辦公</a><span>></span></li>
            <li><a href="#">家具、家居</a><span>></span></li>
            <li><a href="#">男裝、女裝</a><span>></span></li>
            <li><a href="#">寵物、保潔</a><span>></span></li>
            <li><a href="#">運(yùn)動(dòng)、戶(hù)外</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
            <li><a href="#">圖書(shū)、電子書(shū)</a><span>></span></li>
        </ul>
</div>
script

二級(jí)聯(lián)動(dòng)菜單
獲取第一級(jí)所有的菜單li

var lis = document.getElementById('menu').children[0].children;
遍歷，給每一個(gè)li，設(shè)置over事件

        for(var i=0;i<lis.length;i++){
            // 鼠標(biāo)進(jìn)入
            lis[i].onmouseover = function(){
                // 當(dāng)前元素的背景，設(shè)置為灰色
                this.style.background = '#F7F7F7';

                // 子元素ul顯示
                this.children[2].style.display = 'block';
                // console.log(this.children[0]);
            }

            // 鼠標(biāo)離開(kāi)
            lis[i].onmouseout = function(){
                // 取消背景
                this.style.background = '';

                // 當(dāng)鼠標(biāo)離開(kāi)時(shí)，兒子ul隱藏
                this.children[2].style.display = 'none';
            }
        }
        var love = document.getElementById('menu').children[0].children[0].children[2].children;
        for(var i=0;i<love.length;i++){
            // 鼠標(biāo)進(jìn)入
            love[i].onmouseover = function(){
                // 當(dāng)前元素的背景，設(shè)置為灰色
                this.style.background = '#F7F7F7';

                // 子元素ul顯示
                
                // console.log(this.children[0]);
            }
            // 鼠標(biāo)離開(kāi)
            love[i].onmouseout = function(){
                // 取消背景
                this.style.background = '';

                // 當(dāng)鼠標(biāo)離開(kāi)時(shí)，兒子ul隱藏
                // this.children[2].style.display = 'none';
            }
        }

2.點(diǎn)擊換色標(biāo)題欄

css樣式

*{margin:0;padding:0;}
li{list-style: none;}
a{text-decoration: none;}
.skin{margin-top:50px;}
.skin>li{width:10px;height:10px;margin-right: 20px;}.skin>li:first-child{background: #f00;}
.skin>li:nth-child(2){background: #0f0;}
.skin>li:nth-child(3){background: #000;}
ul{width:500px;margin:0 auto;overflow: hidden;}
.nav{background: red;}
.nav{margin-top:10px;}
.nav>li>a{display: inline-block;width:82px;height:35px;line-height: 35px;color:#fff;
text-align: center;border-left:1px solid #fff;}
div

<div>
    <ul class='skin'>
        <li class='red'></li>
        <li class='blue'></li>
        <li class='black'></li>
    </ul>
    <ul class='nav'>
        <li><a href="#">新聞</a></li>
        <li><a href="#">電影</a></li>
        <li><a href="#">娛樂(lè)</a></li>
        <li><a href="#">體育</a></li>
        <li><a href="#">音樂(lè)</a></li>
        <li><a href="#">旅游</a></li>
    </ul>
</div>
script

var arr=['pink','purple','yellow'];
            var skin=document.querySelectorAll('.skin>li');
            var nav=document.querySelector('.nav');
            var body=document.querySelector('body');
            for(var i=0;i<skin.length;i++){
                skin[i].onclick=function(){
                    var num=arr[i];
                    console.log(num);
                    var a=this.className;
                    console.log(a);
                    this.style.background='#fff';
                    b='5px solid'+'\t'+a;
                    console.log(b);
                    this.style.border=b;
                    console.log(this.style.border);
                    nav.style.background=a;
                    console.log(nav.style.background);
                    console.log(arr[num]);
                    body.style.background=arr[num];
                }
            }