使用height從0開始變化的方法去實現下拉列表時，並且對高度變化添加了一個過渡效果，會出現顏色變化疊加的效果。現在對這個現象進行分析和猜想，也算是進一步加深對下拉列表的理解。

<!--html結構-->
<div id="navList">
    <ul>
        <li>大學新聞</li>
        <li>
            學校概況
            <div class="dropMenu">
                <ul class="cleanfix"
 
>
                    <li>學校簡介</li>
                    <li>學校簡介</li>
                    <li>學校簡介</li>
                    <li>學校簡介</li>
                    <li>學校簡介</li>
                    <li>學校簡介</li>
                </ul>
 

            </div>
        </li>
        <li>學院設定</li>
        <li>人才培養</li>
        <li>科學研究</li>
        <li>學生工作</li>
        <li>招生就業</li>
        <li>社團服務</li>
    </ul>
</div>

/*css樣式程式碼*/
* {
            margin
 
: 0;
            padding: 0;
        }
        .cleanfix:after {
            display: block;
            content: "";
            clear: both;
        }
        #navList {
            height: 35px;
            border-bottom: 10px solid yellow;
        }

        #navList li {
            list-style: none;
            width: 87.62px;
            float: left;
            height: auto;
            line-height: 35px;
            text-align: center;
        }
        #navList .dropMenu {
            width: 176px;
            overflow: hidden; 
            height: 0;
            transition: all 3s ease;
        }
        #navList > ul > li:hover {
                background-color: blue;
            }
        #navList > ul > li:hover .dropMenu {
            background-color: gainsboro;
            height: 110px;
        }

如圖所示為最終的效果圖：

今天主要分析的是加了過渡效果之後變化過程中的一些現象；
下面是兩張過渡效果圖：

如圖所示，在下拉選單中添加了一個過渡效果，會將整個變化過程看的非常清晰。在這裡可以看到下拉列表的顏色有著明顯的深淺分界。那造成這種現象的原因是什麼呢？

首先：我們先分析上邊下拉選單的實現原理：

分析：
1）當#navlist裡面的ul的每一個子一代li的高度height為auto時，整個height是由內部的內容所撐起來的，所以此時下拉選單實現是撐開父容器；
2）當#navlist裡面的ul的每一個子一代li的高度height為固定高度時，下拉選單的實現是溢位父容器。

上述兩個實現原理的不同造成了過渡顏色疊加現象的不同
1）撐開父容器時父容器的background-color的覆蓋面積也會隨著盒子的增大而增大。同時下拉選單的顏色會和父容器有一個疊加的效果，這就會造成下拉選單的左半部分和右半部分的顏色不一致，而且左半部分的顏色就是父容器的背景色和下拉選單的背景色的混合色；
2）溢位父容器時父容器的background-color的覆蓋面積是被父容器限制在容器內部，當下拉選單的height從0開始增大時他是溢位父容器，此時下拉選單的顏色只受自己影響。

結論：
由於下拉選單的實現是因為撐開父容器造成的，所以給父容器li新增背景色和給下拉選單新增背景色會在過渡效果的實現中出現顏色疊加的效果；
注意：
1：沒有給父容器li設定背景色時下拉選單溢位父容器不會出現顏色疊加的現象。所以得出結論當不設定顏色時，預設值並不是白色，而是透明色；
2：猜想：當給下拉選單的每一個li設定背景顏色時，實現下拉選單時不會出現顏色疊加現象。
一共有三層顏色版，最底層是父容器li；中間為下拉選單的背景顏色；最上層是下拉選單中每一個li的背景色。猜想：===========顏色的疊加不能隔層進行；
3：

 #navList > ul > li:hover .dropMenu {
            background-color: gainsboro;
            height: auto;
        }

當下拉選單的高度是auto而不是精確地固定值時，對這個下拉選單實現使用過渡效果，看到的只是顏色上的慢慢變化，但是下拉選單的出現顯得很突兀，很快的出現；只有在設定具體的高度時，過渡效果的渲染才能有一個具體的範圍，才能達到相應的效果。

最後 的話

或許現在的由有限的證據得出的猜想，在一段時間之後會被證實是錯誤的，但是思考過，理解的會更加深刻。css是個魔法世界，來了，不後悔。