This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!

Universal Menu CSS

By: wzislam on Nov 6th, 2012  |  syntax: CSS  |  size: 1.62 KB  |  views: 501  |  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. Source: http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
  2.  
  3. <!-- HTML for a nice gentle Menu for any website -->
  4. <nav>
  5.     <ul class="menu">
  6.         <li><a href="#">Menu - Level 1</a></li>
  7.         <li><a href="#">Menu - Level 1</a>
  8.             <ul>
  9.                 <li><a href="#">Menu - Level 2</a></li>
  10.                 <li><a href="#">Menu - Level 2</a>
  11.                     <ul>
  12.                         <li><a href="#">Menu - Level 3</a></li>
  13.                         <li><a href="#">Menu - Level 3</a></li>
  14.                     </ul>
  15.                 </li>
  16.             </ul>
  17.         </li>
  18.         <li>Menu - Level 1</li>
  19.     </ul>
  20. </nav>
  21.  
  22. /* CSS CODE FOR A MENU, A NICE ONE. AUTHOR: Forgotten. BUT HE/SHE CREATED A NICE ONE. THANKS OBVIOUSLY TO HIM/HER */
  23.  
  24. .menu, .menu ul{
  25. margin:0;
  26. padding:0;
  27. list-style-type:none;
  28. list-style-position:outside;
  29. position:relative;
  30. line-height:1.5em;
  31. }
  32.  
  33. .menu a{
  34. display:block;
  35. padding:0px 5px;
  36. border:1px solid #CCC;
  37. color:#fff;
  38. text-decoration:none;
  39. background-color:#CCC;
  40. }
  41.  
  42. .menu a:hover{
  43. background-color:#fff;
  44. color:#333;
  45. }
  46.  
  47. .menu li{
  48. float:left;
  49. position:relative;
  50. }
  51.  
  52. .menu ul {
  53. position:absolute;
  54. display:none;
  55. width:12em;
  56. top:1.5em;
  57. }
  58.  
  59. .menu li ul a{
  60. width:12em;
  61. height:auto;
  62. float:left;
  63. }
  64.  
  65. .menu ul ul{
  66. top:auto;
  67. }      
  68.  
  69. .menu li ul ul {
  70. left:12em;
  71. margin:0px 0 0 10px;
  72. }
  73.  
  74. .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
  75. display:none;
  76. }
  77.  
  78. .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
  79. display:block;
  80. position:absolute;
  81. z-index:5000;
  82. }
clone this paste RAW Paste Data