明白你的意思了，因为hover是在元素上面，所以可以把下面弹出来的放在更多这个容器里，还有就是js实现了。额，又有一个想法，不过有点麻烦，就算了吧

一个css就搞定了，把一级菜单和他的子菜单包在一个容器下，然后给这个容器写hover样式

按照我的理解，题主的意思是鼠标在“更多”和下面的“列表”上时，“更多”的样式分别呈现出两种状态。
但是我看了一下聚美的页面，和题主的截图好像并不一样，“更多”一直呈现出题主的第一张截图的“浮出”样式（我的是FF浏览器）。

在说解决方案之前，先说一下如何实现下拉列表的功能实现。一般有两种：

1. 在整个 li 上添加 :hover 事件，而不是仅仅在“更多”标签上添加。

2. 在“更多”标签上添加 :hover 事件，同时针对 ul 的 display:none 添加 setTimeout 定时器，比如100ms。

如果一定要实现题主所说的效果。那可以针对“更多”所在的标签元素添加 onmouseover 和 onmouseout 这两个鼠标事件，分别设置不同的样式就可以了。PS：如果是针对上述的第1种方法，要注意这两个鼠标事件要都在 li:hover 这个事件里面。

刚好在学CSS3的hover,就直接用之前的一个例子来回答一下。

题主的意思是,鼠标光标移动到二级菜单的时候,该二级菜单所属的一级菜单的背景色还是保持被触碰的背景色。

直接上代码，更好理解：

 <ul>
            <li><a href="#">首页</a></li>
            <li class="navmenu"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">实例练习</a></li>
                    <li><a href="#">问与答</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>

CSS3的hover事件，直接在li标签上添加：

 li:hover{
    color: #fff;
    background: #666;
}