总效果：

html:

响应式CSS：

/* 网站头部 */

header {

width: 100%;

}

header .top {

line-height: 3rem;

padding: 0 1.5rem;

color: #fff;

background: #555;

border-bottom: 1px #ecc000 solid;

}

header .top .tel {

float: left;

}

header .top ul {

text-align: right;

}

header .top ul li {

display: inline-block;

}

header .top ul li + li {

border-left: 1px solid #999;

margin-left: -3px;

}

header .top ul li a {

display: inline-block;

padding: 0 1.5rem;

color: #fff;

}

@media only screen and (max-width: 50em) {

header .top ul li a {

padding: 0 1rem;

}

}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

}

@media only screen and (max-width: 30em) {

header .top .tel,

header .top ul li:nth-child(3),

header .top ul li:nth-child(4) {

display: none;

}

}

header .main {

padding: 0;

}

header .main .brand {

float: left;

padding: 1rem 1.5rem 0;

}

header .main ul {

text-align: right;

}

header .main ul li {

display: inline-block;

border-left: 1px solid #f0ede9;

}

header .main ul li a {

display: inline-block;

padding: 0 2.5rem;

line-height: 5.5rem;

font-size: 1.6rem;

font-weight: bold;

color: #7c7a65;

text-decoration: none;

}

header .main ul li a:hover,

header .main ul li a:active,

header .main ul li a.active {

color: #ffb300;

background-color: #f8f6f1;

}

@media only screen and (max-width: 50em) {

header .main .brand {

float: none;

display: block;

padding: 0;

margin: 1.5rem auto 0.5rem;

text-align: center;

}

header .main ul {

text-align: center;

}

header .main ul li {

border: none;

}

header .main ul li a {

padding: 0 1.5rem;

}

}

@media only screen and (max-width: 30em) {

header .main ul li {

line-height: 3rem;

}

header .main ul li:first-child {

display: none;

}

header .main ul li a {

font-weight: normal;

padding: 0 0.5rem;

}

}