html竖中⼼,HTML5竖向导航菜单栏CSS
语⾔：
CSSSCSS
确定
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2d2c41;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
ul {
list-style-type: none;
}
a {
color: #b63b4d;
text-decoration: none;
}
h1 {
color: #fff;
font-size: 24px;
borderboxfont-weight: 400;
text-align: center;
margin-top: 80px;
}
h1 a {
color: #c12c42;
font-size: 16px;
}
.
accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px; background: #fff;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px; color: #4d4d4d;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #ccc; position: relative;
-webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
.accordion li:last-child .link { border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down { right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #b63b4d;
}
.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg); transform: rotate(180deg);
}
.submenu {
display: none;
background: #444359;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e; }
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-
o-transition: all 0.25s ease;
transition: all 0.25s ease; }
.submenu a:hover { background: #b63b4d; color: #fff;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。