API tools faq
paste
Advertisement
ZoranBa

Padajuci meni

ZoranBa
Feb 6th, 2016
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.54 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <style type="text/css">
  6. /*__________________________________________________________________________________________________________________*/
  7. *
  8. {
  9. padding:0px;
  10. margin:0px;
  11. }
  12.  
  13. header {
  14. }
  15.  
  16. header nav {
  17. top:-20px;
  18. position: absolute;
  19. left:0;
  20. right:0;
  21. margin:20px auto;
  22. width:60%;
  23. position:fixed;
  24. z-index:10;
  25. -webkit-box-shadow:0px 5px 10px #000;
  26. -moz-box-shadow:0px 5px 10px #000;
  27. -ms-box-shadow:0px 5px 10px #000;
  28. -o-box-shadow:0px 5px 10px #000;
  29. box-shadow:0px 5px 10px #000;
  30.  
  31. }
  32.  
  33. header nav ul {
  34. list-style:none;
  35. }
  36.  
  37. header nav > ul {
  38. display:table;
  39. width:100%;
  40. background:#000;
  41. position: relative;
  42. }
  43.  
  44. header nav > ul li {
  45. display:table-cell;
  46. width:30%;
  47. }
  48.  
  49. /*Sub-menu*/
  50. header nav > ul > li:hover > ul {
  51. display:block;
  52. height:100%;
  53. position:center;
  54. }
  55.  
  56. header nav > ul > li > ul {
  57. display:none;
  58. position:absolute;
  59. background:#000;
  60. width:33.5%;
  61. -webkit-transition: all .3s ease;
  62. -moz-transition: all .3s ease;
  63. -ms-transition: all .3s ease;
  64. -o-transition: all .3s ease;
  65. transition: all .3s ease;
  66. }
  67.  
  68. /*Sub-menu*/
  69. header nav > ul > li:hover > ul {
  70. display:block;
  71. height:100%;
  72. position:center;
  73. }
  74.  
  75. header nav > ul > li > ul > li
  76. {
  77. display:inline;
  78. }
  79.  
  80. header nav > ul li a {
  81. background:#000;
  82. color:#fff;
  83. display:block;
  84. line-height:20px;
  85. padding:20px;
  86. position: relative;
  87. text-align:center;
  88. text-decoration:none;
  89. -webkit-transition: all .3s ease;
  90. -moz-transition: all .3s ease;
  91. -ms-transition: all .3s ease;
  92. -o-transition: all .3s ease;
  93. transition: all .3s ease;
  94. }
  95.  
  96. header nav > ul > li > ul > li a:hover {
  97. background:#5da5a2;
  98. }
  99. .submenua
  100. {
  101. border-top:solid 1px #fff;
  102. }
  103.  
  104. header nav > ul > li > a span {
  105. background:#174459;
  106. display:block;
  107. height:100%;
  108. width:100%;
  109. left:0;
  110. position:absolute;
  111. top:0px;
  112. -webkit-transition: all .3s ease;
  113. -moz-transition: all .3s ease;
  114. -ms-transition: all .3s ease;
  115. -o-transition: all .3s ease;
  116. transition: all .3s ease;
  117. }
  118.  
  119. header nav > ul > li > a span {
  120. display:block;
  121. line-height:60px;
  122. }
  123.  
  124. header nav > ul > li > a:hover > span {
  125. top:-55;
  126. }
  127.  
  128. /*Colores*/
  129. header nav ul li a .primero {
  130. background:#37a4d9;
  131. } .primero img
  132. {
  133. width:50px;
  134. }
  135.  
  136. header nav ul li a .segundo {
  137. background:#5da5a2;
  138. } .segundo img
  139. {
  140. padding-top:5px;
  141. width:50px;
  142. }
  143.  
  144. header nav ul li a .tercero {
  145. background:#f25724;
  146. } .tercero img
  147. {
  148. padding-top:5px;
  149. width:50px;
  150. }
  151. /*__________________________________________________________________________________________________________________*/
  152. </style>
  153. </head>
  154. <center>
  155. <body>
  156. <header>
  157. <nav>
  158. <ul>
  159. <li><a href="https://twitter.com/Vistoporahipe" target="_blank" ><span class="primero"> <img src="http://img3.wikia.nocookie.net/__cb20140610122352/divergente/es/images/f/f7/Twitter.png"></span>Twitter</a>
  160. <!--submenu--> <ul>
  161. <li><a href="#" class="submenua">item</a></li>
  162. <!--fin submenu--> </ul>
  163. </li>
  164. <li><a href="#"><span class="segundo"><img src="http://img2.wikia.nocookie.net/__cb20131116002051/marvel/es/images/1/1a/D_Facebook_F.png"></span>Facebook</a>
  165. <!--submenu--> <ul>
  166. <li><a href="#" class="submenua">Visto por ahí</a></li>
  167. <li><a href="#" class="submenua">Bien dicho</a></li>
  168. <li><a href="#" class="submenua">Tu y Yo hasta viejitos</a></li>
  169. <li><a href="http://maicongonzalez.esy.es/" target="_blank" class="submenua"><img src="http://maicongonzalez.esy.es/icon.png" style="width:20px;"> Maicon Gonzalez</a></li>
  170. <!--fin submenu--> </ul>
  171. </li>
  172. <li><a href="#" target="_blank" ><span class="tercero"><img src="http://otl.co.in/images/New%20Folder/PNG/512/picons18.png"></span>Youtube</a>
  173. <!--submenu--> <ul>
  174. <li><a href="#" class="submenua">item</a></li>
  175. <!--fin submenu--> </ul>
  176. </li>
  177. </ul>
  178. </nav>
  179. </header>
  180.  
  181. </body>
  182. </center>
  183. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!