html响应式导航条,HTML5 响应式垂直导航菜单

CSS

语言：

CSSSCSS

确定

body {

background: #f3f3f3;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

h1 {

font-weight: 300;

text-align: center;

text-transform: uppercase;

}

h2 {

font-weight: 300;

text-align: center;

color: orange;

text-transform: uppercase;

}

aside {

width: 250px;

margin: 20px auto;

}

aside section {

background: #fff;

border: solid 1px #e3e3e3;

border-top: 1px solid orange;

padding: 10px;

margin: 15px 0;

}

aside h3 {

font-weight: 100;

font-size: 22px;

margin: 5px 0;

}

aside ul {

display: block;

list-style: none;

margin: 0;

padding: 0;

}

aside li {

border: solid 1px #e3e3e3;

border-left: 5px solid orange;

margin: 10px 0;

}

aside li a {

display: block;

padding: 10px;

color: #333;

text-decoration: none;

}

aside li a:hover {

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

background: #e3e3e3;

color: orange;

text-decoration: none;

}

@media (max-width: 700px) {

aside h3 {

cursor: pointer;

position: relative;

}

aside ul {

display: none;

}

aside .arrow-down {

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid orange;

position: absolute;

right: 0;

top: 7px;

}

}