Don't like ads? PRO users don't see any ads ;-)
Public Pastes

reddit css help

By: harasho on Aug 8th, 2012  |  syntax: HTML  |  size: 5.50 KB  |  hits: 52  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. HTML:
  2. <div id="before-menu">
  3.                 <ul id="menu">
  4.                         <li><a href="home.html">Home</a></li>
  5.                         <li><a href="johannesburg.html">Johannesburg</a></li>
  6.                         <li><a href="#">Kruger National Park</a></li>
  7.                         <li><a href="#">Victoria Falls</a></li>
  8.                         <li><a href="#">Zambezi River</a></li>
  9.                         <li><a href="#">Plains Game Hunt</a></li>
  10.                         <li><a href="#">Mountain Bushveld Hunt</a></li>
  11.                         <li><a href="#">Indian Ocean</a></li>
  12.                         <li><span id="GMT"></span></li> <!--This is a javascript world clock -->
  13.                         <li><span>
  14.                                 The Countdown clock is here, it is also javascript
  15.                         </span></li>
  16.                 </ul>
  17.  
  18. CSS:
  19. /* Main */
  20.  
  21. #before-menu {
  22.         border-bottom:1px solid #000;
  23. }
  24. #menu{
  25.         width: 100%;
  26.         margin: 0;
  27.         padding: 10px 0 0 0;
  28.         list-style: none;  
  29.         background: #111;
  30.         background: -moz-linear-gradient(#444, #111);
  31.     background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
  32.         background: -webkit-linear-gradient(#444, #111);       
  33.         background: -o-linear-gradient(#444, #111);
  34.         background: -ms-linear-gradient(#444, #111);
  35.         background: linear-gradient(#444, #111);
  36.         -webkit-box-shadow: 2px 0px 1px rgba(156, 156, 156, 0.75);
  37.         -moz-box-shadow:    2px 0px 1px rgba(156, 156, 156, 0.75);
  38.         box-shadow:         2px 0px 1px rgba(156, 156, 156, 0.75);
  39.        
  40.     /* Old Opacity */
  41.     /*-moz-opacity: 0.70;
  42.     opacity: 0.70;
  43.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); */
  44.  
  45.     /* Fallback for web browsers that doesn't support RGBa */
  46.     background: rgb(0, 0, 0) transparent;
  47.     /* RGBa with 0.6 opacity */
  48.     background: rgba(0, 0, 0, 0.6);
  49.     /* For IE 5.5 - 7*/
  50.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  51.     /* For IE 8*/
  52.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  53.     border-bottom:1px solid #333;
  54. }
  55.  
  56. #menu li{
  57.         float: left;
  58.         padding: 0 0 10px 0;
  59.         position: relative;
  60. }
  61.  
  62. #menu a{
  63.         float: left;
  64.         height: 25px;
  65.         padding: 0 25px;
  66.         color: #999;
  67.         text-transform: uppercase;
  68.         font: bold 14px/25px Arial, Helvetica;
  69.         color:#fff;
  70.         text-decoration: none;
  71.         text-shadow: 0 1px 0 #000;
  72. }
  73.  
  74. #menu li:hover > a{
  75.         color: #999;
  76. }
  77.  
  78. #menu li span {
  79.     margin-top: -10px;
  80.     float: right;
  81.     height: 25px;
  82.     padding-left:10px;
  83.     margin-bottom:-8px;
  84.     /*text-transform: uppercase;*/
  85.     font: bold 12px/25px Arial, Helvetica;
  86.     color:#fff;
  87.     text-decoration: none;
  88.     text-shadow: 0 1px 0 #000;
  89. }
  90.  
  91. *html #menu li a:hover{ /* IE6 */
  92.         color: #fafafa;
  93. }
  94.  
  95. #menu li:hover > ul{
  96.         display: block;
  97. }
  98.  
  99. /* Sub-menu */
  100.  
  101. #menu ul{
  102.     list-style: none;
  103.     margin: 0;
  104.     padding: 0;    
  105.     display: none;
  106.     position: absolute;
  107.     top: 35px;
  108.     left: 0;
  109.     z-index: 99999;    
  110.     background: #444;
  111.     background: -moz-linear-gradient(#444, #111);
  112.     background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
  113.     background: -webkit-linear-gradient(#444, #111);    
  114.     background: -o-linear-gradient(#444, #111);
  115.     background: -ms-linear-gradient(#444, #111);       
  116.     background: linear-gradient(#444, #111);   
  117.     -moz-border-radius: 5px;
  118.     border-radius: 5px;
  119. }
  120.  
  121. #menu ul li{
  122.     float: none;
  123.     margin: 0;
  124.     padding: 0;
  125.     display: block;  
  126.     -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  127.     -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  128.     box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
  129. }
  130.  
  131. #menu ul li:last-child{  
  132.     -moz-box-shadow: none;
  133.     -webkit-box-shadow: none;
  134.     box-shadow: none;    
  135. }
  136.  
  137. #menu ul a{    
  138.     padding: 10px;
  139.     height: auto;
  140.     line-height: 1;
  141.     display: block;
  142.     white-space: nowrap;
  143.     float: none;
  144.     text-transform: none;
  145. }
  146.  
  147. *html #menu ul a{ /* IE6 */  
  148.         height: 10px;
  149.         width: 150px;
  150. }
  151.  
  152. *:first-child+html #menu ul a{ /* IE7 */    
  153.         height: 10px;
  154.         width: 150px;
  155. }
  156.  
  157. #menu ul a:hover{
  158.         background: #0186ba;
  159.         background: -moz-linear-gradient(#04acec,  #0186ba);   
  160.         background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
  161.         background: -webkit-linear-gradient(#04acec,  #0186ba);
  162.         background: -o-linear-gradient(#04acec,  #0186ba);
  163.         background: -ms-linear-gradient(#04acec,  #0186ba);
  164.         background: linear-gradient(#04acec,  #0186ba);
  165. }
  166.  
  167. #menu ul li:first-child a{
  168.     -moz-border-radius: 5px 5px 0 0;
  169.     -webkit-border-radius: 5px 5px 0 0;
  170.     border-radius: 5px 5px 0 0;
  171. }
  172.  
  173. #menu ul li:first-child a:after{
  174.     content: '';
  175.     position: absolute;
  176.     left: 30px;
  177.     top: -8px;
  178.     width: 0;
  179.     height: 0;
  180.     border-left: 5px solid transparent;
  181.     border-right: 5px solid transparent;
  182.     border-bottom: 8px solid #444;
  183. }
  184.  
  185. #menu ul li:first-child a:hover:after{
  186.     border-bottom-color: #04acec;
  187. }
  188.  
  189. #menu ul li:last-child a{
  190.     -moz-border-radius: 0 0 5px 5px;
  191.     -webkit-border-radius: 0 0 5px 5px;
  192.     border-radius: 0 0 5px 5px;
  193. }
  194.  
  195. /* Clear floated elements */
  196. #menu:after{
  197.         visibility: hidden;
  198.         display: block;
  199.         font-size: 0;
  200.         content: " ";
  201.         clear: both;
  202.         height: 0;
  203. }
  204.  
  205. * html #menu             { zoom: 1; } /* IE6 */
  206. *:first-child+html #menu { zoom: 1; } /* IE7 */
  207.  
  208. #menu ul li:first-child a:after{
  209.     content: '';
  210.     position: absolute;
  211.     left: 30px;
  212.     top: -8px;
  213.     width: 0;
  214.     height: 0;
  215.     border-left: 5px solid transparent;
  216.     border-right: 5px solid transparent;
  217.     border-bottom: 8px solid #444;
  218. }
  219.  
  220. #menu ul li:first-child a:hover:after{
  221.     border-bottom-color: #04acec;
  222. }
create a new version of this paste RAW Paste Data