Menú sencillo de navegación

Escrito por J.F. el Jueves, 2 de Agosto del 2007 a las 14:28

Como ya viene siendo habitual, un menú de navegación sencillito.

Vemos el código CSS:

TEXTO PLANO

CSS:

1. div#navcontainer
2. {
3. font-family: arial;
4. font-weight: bold;
5. background: #642;
6. position: absolute;
7. right: 0px;
8. margin: 0;
9. padding: 10px;
10. border: 0;
11. }
12.  
13. div#navcontainer ul
14. {
15. display: inline;
16. margin: 0;
17. padding: 0;
18. list-style: none;
19. border: solid 1px #642;
20. }
21.  
22. div#navcontainer h2
23. {
24. border: solid 1px #642;
25. padding: 4px;
26. text-align: center;
27. }
28.  
29. div#navcontainer ul li
30. {
31. display: inline;
32. margin: 0;
33. }
34.  
35. div#navcontainer ul li a
36. {
37. color: #a10;
38. background: #ffc;
39. margin: 0;
40. padding: 2px 5px 2px 5px;
41. text-decoration: none;
42. }
43.  
44. div#navcontainer ul li a:hover
45. {
46. background: #e8db6f;
47. border-bottom: solid 9px #ffc;
48. }

Y finalmente el código HTML:

TEXTO PLANO

HTML:

1. <div id="navcontainer">
2. <ul id="navlist">
3. <li id="active"><a href="#" id="current">Item one</a></li>
4. <li><a href="#">Item two</a></li>
5. <li><a href="#">Item three</a></li>
6. <li><a href="#">Item four</a></li>
7. <li><a href="#">Item five</a></li>
8. </ul>
9. </div>

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>