CSS——鼠标移动显示下拉框，变色

整理一个小Demo: 鼠标移动实现下拉和颜色变化

首先分级的样式:

     <ul >
           <li class="dropdown"><a href="#">下拉</a>
            <ul class="dropdowncontent">
               <li><a>你2</a></li>
               <li><a>你3</a></li>
               <li><a>你4</a></li>
            </ul>
            </li>
      </ul>
   

鼠标点击下拉：

 <style>
        .dropdowncontent {
           //鼠标移动到位置之前，none，不显示
            display: none;
        }

        .dropdown:hover .dropdownconten {
            //hover,鼠标移动到上面的状态，下拉框内容dropdownconten以bolck样式显示
            display: block;
        }

        .dropdowncontent li:hover a {
            //dropdowncontent内容显示，鼠标在上停留的时候，显示红色
            color: red;
        }
    </style>

更多有意思的关于下拉框的设计，可以看博客：CSS中下拉框设计