SHARE
TWEET

Untitled

a guest Jun 19th, 2017 40 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * The first commented line is your dabblet’s title
  3.  */
  4. html{
  5.     box-sizing: boder-box;
  6. }
  7.  
  8. *,
  9. *:before,
  10. *after{
  11.     box-sizing: inherit;
  12. }
  13.  
  14. body{
  15.     background-color: #ffffff;
  16. }
  17.  
  18. .nav {
  19.     width: 80%;
  20.     margin: 100px auto 0 auto;
  21.     text-align: center;
  22. }
  23.  
  24. .nav{
  25.     font-family: Georgia, Arial, sans-serif;
  26.     font-size: 14px;
  27. }
  28.  
  29. .nav-items{
  30.     padding: 0;
  31.     list-style: none;
  32. }
  33.  
  34. .nav-item{
  35.     display: inline-block;
  36.     margin-right:25px;
  37. }
  38.  
  39. .nav-item:last-child{
  40.     margin-right: 0;
  41. }
  42.  
  43. .nav-link,
  44. .nav-link:link,
  45. .nav-link:visited,
  46. .nav-link:active,
  47. .submenu-link,
  48. .submenu-link:link,
  49. .submenu-link:visited,
  50. .submenu-link:active {
  51.     display: block;
  52.     position: relative;
  53.     font-size: 14px;
  54.     letter-spacing: 1px;
  55.     cursor: pointer;
  56.     text-decoration: none;
  57.     outline: none;
  58. }
  59.  
  60. .nav-link,
  61. .nav-link:link,
  62. .nav-link:visited,
  63. .nav-link:active {
  64.     color: #0762e1;
  65.     font-weight: bold;
  66. }
  67.  
  68. .nav-link::before {
  69.     content: "";
  70.     position: absolute;
  71.     top: 100%;
  72.     left: 0;
  73.     width: 100%;
  74.     height: 3px;
  75.     background: rgba(11, 183, 197, 0.9);
  76.     opacity: 0;
  77.     -webkit-transform: translate(0, 10px);
  78.     transform: translate(0, 10px);
  79.     transition: opacity 0.3s ease, transform 0.3s ease;
  80. }
  81.  
  82. .nav-link:hover::before,
  83. .nav-link:hover::before {
  84.     opacity: 1;
  85.     -webkit-transform: translate(0, 5px);
  86.     transform: translate(0, 5px);
  87. }
  88.  
  89. .dropdown {
  90.     position: relative;
  91. }
  92.  
  93. .dropdown .nav-link {
  94.     padding-right: 15px;
  95.     height: 17px;
  96.     line-height: 17px;
  97. }
  98.  
  99. /* ICONO TRIANGULO */
  100. .dropdown .nav-link::after {
  101.     content: "";
  102.     position:absolute;
  103.     top: 6px;
  104.     right: 0;
  105.     border: 5px solid transparent;
  106.     border-top-color: #0762e1;
  107. }
  108.  
  109. /**
  110.  * oculta los submenus
  111.  */
  112.  
  113. .submenu {
  114.     position: absolute;
  115.     top: 100%;
  116.     left: 50%;
  117.     z-index: 100;
  118.     width: 200px;
  119.     margin-left: -100px;
  120.     background: #fff;
  121.  
  122.     border-radius: 3px;
  123.     line-height: 1.46667;
  124.     margin-top: -5px;
  125.     box-shadow: 0 0 8px rgba(0,0,0,.3);
  126.     opacity:0;
  127.     -webkit-transform: translate(0, 0) scale(.85);
  128.     transform: translate(0, 0)scale(.85);
  129.     transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  130.     pointer-events: none;
  131. }
  132.  
  133. .submenu::after,
  134. .submenu::before {
  135.     content: "";
  136.     position: absolute;
  137.     bottom: 100%;
  138.     left: 50%;
  139.     margin-left: -10px;
  140.     border: 10px solid transparent;
  141.     height: 0;
  142. }
  143.  
  144. .submenu::after {
  145.     border-bottom-color: #fff;
  146. }
  147.  
  148. .submenu::before {
  149.     margin-left: -13px;
  150.     border: 13px solid transparent;
  151.     border-bottom-color: rgba(0,0,0,.1);
  152.     -webkit-filter:blur(1px);
  153.  
  154.     filter:blur(1px);
  155. }
  156.  
  157. .submenu-items {
  158.     list-style: none;
  159.     padding: 10px 0;
  160. }
  161.  
  162. .submenu-item {
  163.     display: block;
  164.     text-align: left;
  165. }
  166.  
  167. .submenu-link,
  168. .submenu-link:link,
  169. .submenu-link:visited,
  170. .submenu-link:active {
  171.     color: #3498db;
  172.     padding: 10px 20px;
  173. }
  174.  
  175. .submenu-link:hover {
  176.     text-decoration: underline;
  177. }
  178.  
  179. .submenu-seperator {
  180.     height: 0;
  181.     margin: 12px 10px;
  182.     border-top: 1px solid #eee;
  183. }
  184.  
  185. .show-submenu .submenu {
  186.     opacity: 1;
  187.     -webkit-transform: translate(0, 25px) scale(1);
  188.     transform: translate(0, 25px) scale(1);
  189.     pointer-events: auto;
  190. }
RAW Paste Data
Top