Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- *{
- margin: 0;
- padding: 0;
- font-family: sans-serif;
- list-style: none;
- text-decoration: none;
- }
- .middle{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .menu{
- width: 300px;
- border-radius: 8px;
- overflow: hidden;
- }
- .item{
- border-top: 1px solid #2980b9;
- overflow: hidden;
- }
- .btn{
- display: block;
- padding: 16px 20px;
- background: #3498db;
- color: white;
- }
- .btn:before{
- content: '';
- position: absolute;
- width: 14px;
- height: 14px;
- background: #3498db;
- left: 20px;
- bottom: -7px;
- transform: rotate(45deg);
- }
- .btn i{
- margin-right: 10px;
- }
- .smenu{
- background: #34495e;
- overflow: hidden;
- transition: max-height 0.3s;
- max-height: 0;
- }
- .smenu a{
- display: block;
- padding: 16px 26px;
- color: white;
- font-size: 4px 0;
- }
- .smenu a :before{
- content: '';
- position: absolute;
- width: 6px;
- height: 100%;
- background: #3498db;
- left: 0;
- top: 0;
- transition: 0.3s;
- opacity: 0;
- }
- .smenu a: hover:before{
- opacity: 1;
- }
- .item:target .smenu{
- max-height: 10em;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement