li里面嵌套a标签html和css小例子

总效果：

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;
    }
}