Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * The first commented line is your dabblet’s title
- */
- html{
- box-sizing: boder-box;
- }
- *,
- *:before,
- *after{
- box-sizing: inherit;
- }
- body{
- background-color: #ffffff;
- }
- .nav {
- width: 80%;
- margin: 100px auto 0 auto;
- text-align: center;
- }
- .nav{
- font-family: Georgia, Arial, sans-serif;
- font-size: 14px;
- }
- .nav-items{
- padding: 0;
- list-style: none;
- }
- .nav-item{
- display: inline-block;
- margin-right:25px;
- }
- .nav-item:last-child{
- margin-right: 0;
- }
- .nav-link,
- .nav-link:link,
- .nav-link:visited,
- .nav-link:active,
- .submenu-link,
- .submenu-link:link,
- .submenu-link:visited,
- .submenu-link:active {
- display: block;
- position: relative;
- font-size: 14px;
- letter-spacing: 1px;
- cursor: pointer;
- text-decoration: none;
- outline: none;
- }
- .nav-link,
- .nav-link:link,
- .nav-link:visited,
- .nav-link:active {
- color: #0762e1;
- font-weight: bold;
- }
- .nav-link::before {
- content: "";
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- height: 3px;
- background: rgba(11, 183, 197, 0.9);
- opacity: 0;
- -webkit-transform: translate(0, 10px);
- transform: translate(0, 10px);
- transition: opacity 0.3s ease, transform 0.3s ease;
- }
- .nav-link:hover::before,
- .nav-link:hover::before {
- opacity: 1;
- -webkit-transform: translate(0, 5px);
- transform: translate(0, 5px);
- }
- .dropdown {
- position: relative;
- }
- .dropdown .nav-link {
- padding-right: 15px;
- height: 17px;
- line-height: 17px;
- }
- /* ICONO TRIANGULO */
- .dropdown .nav-link::after {
- content: "";
- position:absolute;
- top: 6px;
- right: 0;
- border: 5px solid transparent;
- border-top-color: #0762e1;
- }
- /**
- * oculta los submenus
- */
- .submenu {
- position: absolute;
- top: 100%;
- left: 50%;
- z-index: 100;
- width: 200px;
- margin-left: -100px;
- background: #fff;
- border-radius: 3px;
- line-height: 1.46667;
- margin-top: -5px;
- box-shadow: 0 0 8px rgba(0,0,0,.3);
- opacity:0;
- -webkit-transform: translate(0, 0) scale(.85);
- transform: translate(0, 0)scale(.85);
- transition: transform 0.1s ease-out, opacity 0.1s ease-out;
- pointer-events: none;
- }
- .submenu::after,
- .submenu::before {
- content: "";
- position: absolute;
- bottom: 100%;
- left: 50%;
- margin-left: -10px;
- border: 10px solid transparent;
- height: 0;
- }
- .submenu::after {
- border-bottom-color: #fff;
- }
- .submenu::before {
- margin-left: -13px;
- border: 13px solid transparent;
- border-bottom-color: rgba(0,0,0,.1);
- -webkit-filter:blur(1px);
- filter:blur(1px);
- }
- .submenu-items {
- list-style: none;
- padding: 10px 0;
- }
- .submenu-item {
- display: block;
- text-align: left;
- }
- .submenu-link,
- .submenu-link:link,
- .submenu-link:visited,
- .submenu-link:active {
- color: #3498db;
- padding: 10px 20px;
- }
- .submenu-link:hover {
- text-decoration: underline;
- }
- .submenu-seperator {
- height: 0;
- margin: 12px 10px;
- border-top: 1px solid #eee;
- }
- .show-submenu .submenu {
- opacity: 1;
- -webkit-transform: translate(0, 25px) scale(1);
- transform: translate(0, 25px) scale(1);
- pointer-events: auto;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement