猜想：下拉菜单的颜色叠加！

使用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是个魔法世界，来了，不后悔。