API tools faq
paste
unitistar

css3 menu

unitistar
May 22nd, 2012
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
LOL Code 6.73 KB | None | 0 0
raw download clone embed print report
  1. index.html
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html dir="ltr">
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7.    
  8.     <link rel="stylesheet" href="style.css" type="text/css" /><style>._livepeoplemenu{display:none}</style>
  9.  
  10.    
  11. </head>
  12. <body style="background-color:#EBEBEB">
  13.  
  14.  
  15. <ul id="livepeoplemenu" class="topmenu">
  16.     <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="/blue-smiley1.png" alt="Новости"/>Новости</a></li>
  17.     <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="/blue-sitemap.png" alt="Новости"/>Новости</span></a>
  18.     <ul>
  19.         <li class="subfirst"><a href="#">Добавить</a></li>
  20.         <li><a href="#">Живой поток</a></li>
  21.         <li class="sublast"><a href="#">Лучшии информаторы</a></li>
  22.     </ul></li>
  23.     <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="/blue-user.png" alt="Соц.сети"/>Соц.сети</a></li>
  24.     <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="/blue-globe.png" alt="Информационные потоки"/>Информационные потоки</span></a>
  25.     <ul>
  26.         <li class="subfirst"><a href="#">Соц.сети</a></li>
  27.         <li><a href="#">Из жизни</a></li>
  28.         <li><a href="#">Смешное</a></li>
  29.         <li><a href="#">ЧП</a></li>
  30.         <li class="sublast"><a href="#">Личное</a></li>
  31.     </ul></li>
  32. </ul>
  33.  
  34.  
  35. </body>
  36. </html>
  37.  
  38. style.css
  39.  
  40. ul#livepeoplemenu,ul#livepeoplemenu ul{
  41.     margin:0;list-style:none;padding:0;background-color:#403841;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
  42. ul#livepeoplemenu ul{
  43.     display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#00b01a;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
  44. ul#livepeoplemenu li:hover>*{
  45.     display:block;}
  46. ul#livepeoplemenu li{
  47.     position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
  48. ul#livepeoplemenu li:hover{
  49.     z-index:1;}
  50. ul#livepeoplemenu{
  51.     padding:6px 6px 6px 0;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
  52.     *display:inline;}
  53. ul#livepeoplemenu>li{
  54.     margin:0 0 0 6px;}
  55. * html ul#livepeoplemenu li a{
  56.     display:inline-block;}
  57. ul#livepeoplemenu ul>li{
  58.     margin:6px 0 0;}
  59. ul#livepeoplemenu a:active, ul#livepeoplemenu a:focus{
  60.     outline-style:none;}
  61. ul#livepeoplemenu a{
  62.     display:block;vertical-align:middle;text-align:center;text-decoration:none;font:12px Arial;color:#000000;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
  63. ul#livepeoplemenu ul li{
  64.     float:none;margin:0;}
  65. ul#livepeoplemenu ul a{
  66.     text-align:center;}
  67. ul#livepeoplemenu li:hover>a,ul#livepeoplemenu a.pressed{
  68.     background-color:#1591d4;border-color:#F8F8F8;border-style:solid;color:#000000;text-decoration:none;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
  69. ul#livepeoplemenu img{
  70.     border:none;vertical-align:middle;margin-right:8px;}
  71. ul#livepeoplemenu img.over{
  72.     display:none;}
  73. ul#livepeoplemenu li:hover > a img.def{
  74.     display:none;}
  75. ul#livepeoplemenu li:hover > a img.over{
  76.     display:inline;}
  77. ul#livepeoplemenu li a.pressed img.over{
  78.     display:inline;}
  79. ul#livepeoplemenu li a.pressed img.def{
  80.     display:none;}
  81. ul#livepeoplemenu li:hover>a,ul#livepeoplemenu li>a.pressed{
  82.     background-color:#1591d4;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#000000;text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
  83. ul#livepeoplemenu li.topmenu>a{
  84.     background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#000000;text-decoration:none;text-shadow:0 1px 1px #000000;}
  85. ul#livepeoplemenu li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
  86.     background-color:#3996fa;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#003e44;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
  87. ul#livepeoplemenu li.subfirst>a{
  88.     border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
  89. ul#livepeoplemenu li.sublast>a{
  90.     border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
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!