API tools faq
paste
Guest User

html roxet

a guest
Jun 8th, 2015
296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Darmowy Kurs CSS</title>
  6.  
  7. <style>
  8. /* ------------------------CZĘŚĆ-GÓRNA-MENU------------------------ */
  9.  
  10. /* wygląd głównego elementu - ol */
  11. ol {
  12. width: 100%;
  13. margin: 0;
  14. padding: 10px 0 0 0;
  15. list-style: none;
  16. background: #111;
  17. background: -moz-linear-gradient(#444, #111);
  18. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
  19. background: -webkit-linear-gradient(#444, #111);
  20. background: -o-linear-gradient(#444, #111);
  21. background: -ms-linear-gradient(#444, #111);
  22. background: linear-gradient(#444, #111);
  23. -moz-border-radius: 50px;
  24. border-radius: 50px;
  25. -moz-box-shadow: 0 2px 1px #9c9c9c;
  26. -webkit-box-shadow: 0 2px 1px #9c9c9c;
  27. box-shadow: 0 2px 1px #9c9c9c;
  28. text-align: center;
  29. }
  30.  
  31. /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
  32. ol a {
  33. display: inline-block;
  34. *display: inline;
  35. zoom: 1;
  36. height: 25px;
  37. padding: 0 25px;
  38. color: #999;
  39. text-transform: uppercase;
  40. font: bold 12px/25px Arial, Helvetica;
  41. text-decoration: none;
  42. text-shadow: 0 1px 0 #000;
  43. }
  44.  
  45. /* wygląd elementów - li - wszystkich dzieci elementu - ol */
  46. ol > li {
  47. padding: 0 0 10px 0;
  48. position: relative;
  49. line-height: 0;
  50. display: inline-block;
  51. *display: inline;
  52. zoom: 1;
  53. }
  54.  
  55. /* wygląd elementu - li - pierwszego dziecka elementu - ol */
  56. ol > li:first-child {
  57. margin-left:0;
  58. }
  59.  
  60. /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
  61. ol > li:hover {
  62. color: #fafafa;
  63. }
  64.  
  65. /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
  66. ol > li:hover > a {
  67. color: #fafafa;
  68. }
  69.  
  70. /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
  71. ol > li:hover > ul {
  72. display: block;
  73. }
  74.  
  75. /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */
  76.  
  77. /* wygląd głównych rozwijanych elementów - ul */
  78. ol > li > ul {
  79. list-style: none;
  80. margin: 0;
  81. padding: 0;
  82. display: none;
  83. position: absolute;
  84. top: 35px;
  85. left: 0;
  86. z-index: 99999;
  87. background: #444;
  88. background: -moz-linear-gradient(#444, #111);
  89. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
  90. background: -webkit-linear-gradient(#444, #111);
  91. background: -o-linear-gradient(#444, #111);
  92. background: -ms-linear-gradient(#444, #111);
  93. background: linear-gradient(#444, #111);
  94. -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
  95. -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
  96. box-shadow: 0 0 2px rgba(255,255,255,.5);
  97. -moz-border-radius: 5px;
  98. border-radius: 5px;
  99. text-align: left;
  100. }
  101.  
  102. /* wygląd elementu - li - w części rozwijanej */
  103. ol > li > ul > li {
  104. float: none;
  105. margin: 0;
  106. padding: 0;
  107. display: block;
  108. -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  109. -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  110. box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  111. }
  112.  
  113. /* wygląd elementu - a - w części rozwijanej */
  114. ol > li > ul > li > a {
  115. padding: 10px;
  116. height: 10px;
  117. width: 130px;
  118. height: auto;
  119. line-height: 1;
  120. display: block;
  121. white-space: nowrap;
  122. float: none;
  123. text-transform: none;
  124. }
  125.  
  126. /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
  127. ol > li > ul > li:hover {
  128. background-color:#DDD;
  129. }
  130.  
  131. /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
  132. ol > li > ul > li:hover > a {
  133. background: #0186ba;
  134. background: -moz-linear-gradient(#04acec, #0186ba);
  135. background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
  136. background: -webkit-linear-gradient(#04acec, #0186ba);
  137. background: -o-linear-gradient(#04acec, #0186ba);
  138. background: -ms-linear-gradient(#04acec, #0186ba);
  139. background: linear-gradient(#04acec, #0186ba);
  140. }
  141. </style>
  142.  
  143. </head>
  144.  
  145. <body>
  146.  
  147. <ol>
  148. <li><a href="#">dział - 1</a>
  149. <ul>
  150. <li><a href="#">link - 1</a></li>
  151. <li><a href="#">link - 2</a></li>
  152. <li><a href="#">link - 3</a></li>
  153. <li><a href="#">link - 4</a></li>
  154. <li><a href="#">link - 5</a></li>
  155. </ul>
  156. </li>
  157.  
  158. <li><a href="#">dział - 2</a>
  159. <ul>
  160. <li><a href="#">link - 1</a></li>
  161. <li><a href="#">link - 2</a></li>
  162. <li><a href="#">link - 3</a></li>
  163. </ul>
  164. </li>
  165.  
  166. <li><a href="#">dział - 3</a></li>
  167.  
  168. <li><a href="#">dział - 4</a>
  169. <ul>
  170. <li><a href="#">link - 1</a></li>
  171. <li><a href="#">link - 2</a></li>
  172. <li><a href="#">link - 3</a></li>
  173. <li><a href="#">link - 4</a></li>
  174. </ul>
  175. </li>
  176. </ol>
  177.  
  178. </body>
  179. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!