效果图

类似网页：
http://www.cnpc.com.cn/cnpc/index.shtml

布局分析

代码

<style>
    .news{
        /*加此样式，是为了news_menu相对该父标签定位*/
        position: relative;
        border: 1px solid red;
        width: 100px;
        height: 28px;
        line-height: 28px;
    }
    .news:hover .news_menu{
        /*鼠标划过时，菜单显示*/
        display: block;
    }

    .news_menu{
        /*目的：让菜单隐藏*/
        display: none;
        border: 1px solid #c00;
        position: absolute;
        top:28px;
        left: -1px;
        width: 200px;
    }
    .news_menu li{
        list-style: none;
    }
    .news:hover a{
        /*划过 .news 时，超链接变颜色*/
        color: #cc0000;
    }
</style>

<div class="news">
    <a href="#">新闻中心</a>
    <div class="news_menu">
        <ul>
            <li>集团新闻</li>
            <li>媒体聚焦</li>
            <li>社会责任</li>
            <li>社会评价</li>
            <li>行业新闻</li>
        </ul>
    </div>
</div>

原文出处：/show_1IX3kQBiBIWq.html