Menu com Links Ocultos - Tutorial

Alo,alo? voltei a postar finalmente! (EEEEEeeh) antes queria dar todos os créditos ao blog "Reino Kawaii"''

  Nesse post vamos fazer um menu super legal, que oculta os links e só aparece quando você passar o mouse sobre ele; assim você poupa espaço, pode dar um efeito legal e fácil de ser feito.

Veja o resultado abaixo (no de vocês não vai aparecer o coração rosa que está aparecendo aqui no blog; no meu aparece porque personalizei as listas com marcadores):

• Menu
  • Link 1
  • Link 2
  • Link 3
  • Link 4

Para isso, em seu HTML, antes de /b:skin, cole isso:

copiar sourceprint?

01	#me-nu { /* area geral */

02	margin: 0 20px 0 10px;

03	position: relative;

04	width: 210px;

05	z-index: 100;

06

}

07	#me-nu ul {

08	list-style-type: none;

09	margin: 0;

10	padding: 0;

11

}

12	#me-nu li { list-style-type: none; }

13	#me-nu a { /* links */

14	color: brown;

15	font-size: 17px;

16	text-decoration: none;

17	text-shadow: 0px 1px 1px #fff;

18	font-family: 'Lobster', cursive;

19

}

20	#me-nu a:hover { color: #FFB0B0; }

21	#me-nu .palavra {/* palavra menu */

22	background-color: #FED8CD;

23	outline: rgb(252, 250, 250) 1px dashed;

24	outline-offset: -3px;

25	padding: 5px 0;

26	text-align: center;

27	display: block;

28	position: absolute;

29	width: 210px;

30

}

31	#me-nu ul.palavra li {

32	color: brown;

33	font-family: 'Lobster', cursive;

34	font-size: 24px;

35	text-shadow: 0px 1px 1px #fee;

36

}

37	#me-nu ul.palavra ul li {/* itens ocultos */

38	border-top: 2px dashed #fcc;

39	padding: 0 0 5px;

40	-moz-transition: all 1s;

41	-webkit-transition: all 1s;

42	-o-transition: all 1s;

43	transition: all 1s;

44

}

45	/* links ocultos */

46	#me-nu .oculto {

47	display: block;

48	padding: 0 10px;

49	position: relative;

50	top: 10px;

51	height: 0;

52	overflow: hidden;

53	-moz-transition: all 1s;

54	-webkit-transition: all 1s;

55	-o-transition: all 1s;

56	transition: all 1s;

57

}

58	#me-nu ul.palavra:hover .oculto { height: 200px;

59

}

Agora, onde quer que o menu apareça, como por exemplo, em um gadget HTML/JavaScript, cole isso:

copiar sourceprint?

01	<div id="me-nu">

02	<ul class="palavra">

03	<li>Menu<ul class="oculto">

04	<li><a href="#">Link 1</a></li>

05	<li><a href="#">Link 2</a></li>

06	<li><a href="#">Link 3</a></li>

07	<li><a href="#">Link 4</a></li>

08

</ul>

09	</li></ul>

10

</div>

Espero que gostem!