Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Source: http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
- <!-- HTML for a nice gentle Menu for any website -->
- <nav>
- <ul class="menu">
- <li><a href="#">Menu - Level 1</a></li>
- <li><a href="#">Menu - Level 1</a>
- <ul>
- <li><a href="#">Menu - Level 2</a></li>
- <li><a href="#">Menu - Level 2</a>
- <ul>
- <li><a href="#">Menu - Level 3</a></li>
- <li><a href="#">Menu - Level 3</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li>Menu - Level 1</li>
- </ul>
- </nav>
- /* CSS CODE FOR A MENU, A NICE ONE. AUTHOR: Forgotten. BUT HE/SHE CREATED A NICE ONE. THANKS OBVIOUSLY TO HIM/HER */
- .menu, .menu ul{
- margin:0;
- padding:0;
- list-style-type:none;
- list-style-position:outside;
- position:relative;
- line-height:1.5em;
- }
- .menu a{
- display:block;
- padding:0px 5px;
- border:1px solid #CCC;
- color:#fff;
- text-decoration:none;
- background-color:#CCC;
- }
- .menu a:hover{
- background-color:#fff;
- color:#333;
- }
- .menu li{
- float:left;
- position:relative;
- }
- .menu ul {
- position:absolute;
- display:none;
- width:12em;
- top:1.5em;
- }
- .menu li ul a{
- width:12em;
- height:auto;
- float:left;
- }
- .menu ul ul{
- top:auto;
- }
- .menu li ul ul {
- left:12em;
- margin:0px 0 0 10px;
- }
- .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
- display:none;
- }
- .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
- display:block;
- position:absolute;
- z-index:5000;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement