* { margin: 0; padding: 0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body.vertical { background: #eee; color: #444; -webkit-font-smoothing: antialiased; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 400; height: auto !important; height: 100%; min-height: 100%; text-rendering: optimizeLegibility; } div.wrapper { margin: 20px auto; width: 350px; } p.vertical { font-family: georgia; font-size: 1rem; line-height: 25px; margin: 24px 0; text-align: center; } nav.vertical { border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.15); overflow: hidden; text-align: center; } nav.vertical > ul { list-style-type: none; } nav.vertical > ul > li { display: block; } nav.vertical > ul > li > a { background-color: rgb(157, 34, 60); background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1); color: rgb(255,255,255); display: block; font-size: 2rem; font-weight: 500; height: 50px; letter-spacing: .5rem; line-height: 50px; text-shadow: 0 1px 1px rgba(0,0,0,.1); text-transform: uppercase; transition: all .1s ease; text-decoration: none; } nav.vertical > ul > li > a:hover { background-color: rgb(114, 51, 98); background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); cursor: pointer; } nav.vertical > ul > li > div { background-color: rgb(255,255,255); } nav.vertical > ul > li > div > ul { list-style-type: none; } nav.vertical > ul > li > div > ul > li > a { background-color: rgb(255,255,255); border-bottom: 1px solid rgba(0,0,0,.05); color: #333331; display: block; font-size: 1.5rem; padding: 10px 0; text-decoration: none; transition: all 0.15s linear; } nav.vertical > ul > li > div > ul > li:hover > a { background-color: lightBlue; color: rgb(255,255,255); padding: 10px 0 10px 50px; }