G2A Many GEOs
SHARE
TWEET

Universal Menu CSS

wzislam Nov 6th, 2012 2,025 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. }
RAW Paste Data
Ledger Nano X - The secure hardware wallet
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
Top