|
|
Line 1: |
Line 1: |
− | body {
| |
− | font-family: 'Roboto', sans-serif;
| |
− | padding: 0;
| |
− | margin: 0;
| |
− | }
| |
− | nav {
| |
− | width: 100%;
| |
− | margin: 0 auto;
| |
− | background: lightpink;
| |
− | padding: 10px ;
| |
− | box-shadow: 0 5px 5px hotpink;
| |
− | }
| |
| | | |
− | nav ul {
| |
− | list-style: none;
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | nav ul li {
| |
− | display: inline-block;
| |
− | }
| |
− |
| |
− | nav ul li a {
| |
− | display: block;
| |
− | padding: 15px;
| |
− | text-decoration: none;
| |
− | color: hotpink;
| |
− | font-weight: 800;
| |
− | text-transform: uppercase;
| |
− | margin: 0 10px;
| |
− | }
| |
− |
| |
− | nav ul li a,
| |
− | nav ul li a:after,
| |
− | nav ul li a:before {
| |
− | transition: all .5s;
| |
− | }
| |
− |
| |
− | nav ul li a:hover {
| |
− | color: #555;
| |
− | }
| |
− |
| |
− | /* SHIFT */
| |
− | nav.shift ul li a {
| |
− | position:relative;
| |
− | z-index: 1;
| |
− | }
| |
− | nav.shift ul li a:hover {
| |
− | color: hotpink;
| |
− | }
| |
− | nav.shift ul li a:after {
| |
− | display: block;
| |
− | position: absolute;
| |
− | top: 0;
| |
− | left: 0;
| |
− | bottom: 0;
| |
− | right: 0;
| |
− | margin: auto;
| |
− | width: 100%;
| |
− | height: 1px;
| |
− | content: '.';
| |
− | color: transparent;
| |
− | background: #FFF;
| |
− | visibility: hidden;
| |
− | opacity: 0;
| |
− | z-index: -1;
| |
− | }
| |
− | nav.shift ul li a:hover:after {
| |
− | opacity: 1;
| |
− | visibility: visible;
| |
− | height: 100%;
| |
− | }
| |