DP2PX.COM

演示和源码

html布局

<div class="nav" id="nav">
    <span class="cloud" id="cloud"></span>
    <ul>
        <li>首页新闻</li>
        <li>师资力量</li>
        <li>活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
</div>

css布局

*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
    background-color: #000;
}
.nav {
    width: 800px;
    height: 42px;
    background:url("images/rss.png") no-repeat right center #fff;
    margin: 100px auto;
    border-radius: 5px;
    position: relative;
}
.nav ul {
    position: absolute;
    top: 0;
    left: 0;
}
.nav li {
    float: left;
    width: 83px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #000;
    cursor: pointer;
}
.cloud {
    width: 83px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ff0000;
    border-radius: 5px;
}