rv

by niki4810

HTML

<div class="mainContainer clearfix">
    <div class="toolBar clearfix">
        <ul class="nav">
            <li><a href="#">File</a>

            </li>
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">View</a>
            </li>
            <li><a href="#">Note</a>
            </li>
            <li><a href="#">Format</a>
            </li>
            <li><a href="#">Tools</a>
            </li>
            <li><a href="#">Help</a>
            </li>
        </ul>
        <div class="nav-float">
            <ul class="nav"></ul>
        </div>
    </div>
    <div class="bookmarkBar"></div>
    <div class="contentBar">
        <div class="contentLeft"></div>
        <div class="contentMiddle"></div>
        <div class="contentRight"></div>
    </div>
</div>

CSS

/* apply a natural box layout model to all elements */
 *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    height:100%;
}
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}
.mainContainer {
    width:100%;
    padding:1px;
    background-color: #DDD;
}
.toolBar, .contentBar, .bookmarkBar {
    position:relative;
    float:left;
    border:1px solid #d8d8d8;
    width:100%;
}
.toolBar {
    background: #e1ffff;
    border-bottom: 1px solid #4096ee;
    background: #feffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feffff), color-stop(100%, #d2ebf9));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #feffff 0%, #d2ebf9 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0);
    /* IE6-9 */
    height:30px;
}
ul.nav {
    list-style:none;
    margin:0;
    padding:0;
    font-size:13px;
    height:100%;
}
li {
    display:inline-block;
    padding:5px;
}
li a {
    color:#000;
    text-decoration:none;
}
.nav-float {
    position:absolute;
    right:0;
    top:0;
    width:60%;
    background-color:#fff;
    height:30px;
    border-left: 1px solid #4096ee;
    -moz-border-radius-topleft: 25px 50px;
    border-top-left-radius: 25px 50px;
}
.bookmarkBar {
    height:30px;
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
    /* FF3.6+ */
    background:...