Menús CSS Ejemplo base <html> <head> </head> <body id="body_hom"> <ul id="nav"> <li id="navH"><a href="#">Home </a></li> <li id="navP"><a href="#">Prod </a></li> <li id="navC"><a href="#">Cont </a></li> <li id="navPr"><a href="#">Prec </a></li> <li id="navCo"><a href="#">Coment </a></li> <li id="navO"><a href="#">Otro </a></li> </ul> </body> </html> Ejemplo menu 1 html{ font:small/1.4 "Lucida Grande", Tahoma, sans-serif; } body { font-size:92%; } #nav { margin: 0; padding: 0; background: #6F6146; list-style-type: none; width: 180px; float: left;} #nav li { margin: 0; padding: 0; float: left; width: 100%; } #nav a { display: block; /* incrementa el area de seleccion */ color: #FFF; text-decoration: none; padding: 0 15px; line-height: 2.5; border-bottom:1px solid #FFF; } #nav #nav_con a { /*es el ultimo del menu*/ border : none; } #nav a:hover { background: #4F4532; } #body_hom #nav_hom a, #body_map #nav_map a,#body_jou #nav_jou a, #body_his #nav_his a,#body_ref #nav_ref a, #body_con #nav_con a { background: #BEB06F; color: #1A1303; font-weight: bold; } Menú horizontal html { font: small/1.4 "Lucida Grande", Tahoma, sans-serif; body { font-size: 92%; } } #nav { margin: 0; padding: 0; background: #6F6146; list-style-type: none; width: 767px; float: left; } #nav li { margin: 0; padding: 0; float: left; } #nav a { float: left; width: 127px; color: #FFF; text-decoration: none; #FFF; } line-height: 2.5; text-align: center; border-right: 1px solid #nav #navO a { border: none; } #nav a:hover { background: #4F4532; } #body_hom #navH a, #body_map #navP a, /* los bodys son los id's supuestos de la otras pags*/ #body_jou #navC a,#body_his #navPr a, #body_ref #navCo a, #body_con #navO a { background: #BEB06F; color: #1A1303; font-weight: bold; } Menú horizontal con imágenes html { font: small/1.4 "Lucida Grande", Tahoma, sans-serif; } body { font-size: 92%; } nav { margin: 0; padding: 0; background: #fff; list-style-type: none; width: 767px; float: left; } nav li { margin: 0; padding: 0; float: left; } nav a { float: left; width: 100px; color: #FFF; text-decoration: none; line-height: 2.5; text-align: center; border-right: 1px solid #FFF; background: url(imagenes/pestanias.png) norepeat; } nav #navO a { border: none; } nav a:hover { background-color: #fff; background-position: -100px 0; } body_hom #navH a,#body_map #navP a, body_jou #navC a,#body_his #navPr a, body_ref #navCo a,#body_con #navO a { background-color: #fff; background-position: -200px 0; color: #fff; font-weight: bold; } Menu desplegable 1- Código html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="menu.css" /> </head> <body> <ul id="menu"> <li class="menuitem" id="mi01"><a href="/">Item 1</a> <ul class="submenu"> <li><a href="/">Subitem 1.1</a></li> <li><a href="/">Subitem 1.2</a> <ul class="subsubmenu"> <li><a href="/">Subitem 1.2.1</a></li> <li><a href="/">Subitem 1.2.2</a> <ul class="subsubmenu"> <li><a href="/">Subitem 1.2.2.1</a></li> <li><a href="/">Subitem 1.2.2.2</a> <ul class="subsubmenu"> <li><a href="/">Subitem 1.2.2.2.1</a></li> <li><a href="/">Subitem 1.2.2.2.2</a></li> <li><a href="/">Subitem 1.2.2.2.3</a></li> <li><a href="/">Subitem 1.2.2.2.4</a></li> </ul></li> Importante: No omitir -strict.dtd"> Menu desplegable 1- Código html <li><a href="/">Subitem 1.2.2.3</a></li> <li><a href="/">Subitem 1.2.2.4</a></li> </ul></li> <li><a href="/">Subitem 1.2.3</a></li> <li><a href="/">Subitem 1.2.4</a></li> </ul></li> <li><a href="/">Subitem 1.3</a></li> <li><a href="/">Subitem 1.4</a></li> </ul></li> <li class="menuitem" id="mi02"><a href="/">Item 2</a> <ul class="submenu"> <li><a href="/">Subitem 2.1</a></li> <li><a href="/">Subitem 2.2</a></li> <li><a href="/">Subitem 2.3</a></li> </ul></li> <li class="menuitem" id="mi03"><a href="/">Item 3</a> <ul class="submenu"> <li><a href="/">Subitem 3.1</a></li> <li><a href="/">Subitem 3.2</a></li> <li><a href="/">Subitem 3.3</a></li> <li><a href="/">Subitem 3.4</a></li> </ul></li> </ul> </div> </body> </html> Menu desplegable 1-código CSS #menu { position:relative; list-style-type:none; margin:1em 0 2em 0; padding:0; width:100%; height:1.4em; font:100%/1 sans-serif; } .menuitem { position:absolute; top:10px; margin:0; padding:0; width:10em; height:1.4em; overflow:hidden; } #mi01 { left:0 } #mi02 { left:10em } #mi03 { left:20em } .menuitem ul { display:block; margin: 0; padding:0; list-style-type:none; } .menuitem li { margin:0; padding:0 } .submenu li { position:relative } .submenu .subsubmenu { position:absolute; top:0; left:10em; width:10em; display:none; } .menuitem:hover { height:10em; overflow:visible; } .submenu li:hover > .subsubmenu { display:block; } #menu a { display:block; margin:0; padding: 0.2em 0.5em; text-align:center; text-decoration:none; color:white; border-top:1px solid white; border-left:1px solid white;} #menu a:hover { background:black } .menuitem a { background:pink } .menuitem ul a { background:navy } .menuitem ul ul a { background:blue } .menuitem ul ul ul a { background:violet } .menuitem ul ul ul ul a { background:orange } Menú desplegable 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional -transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="menu2.css" /> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="gallery.html">Gallery</a> <ul> <li><a href="gallery1.html">Gallery 1</a></li> <li><a href="gallery2.html">Gallery 2</a></li> <li><a href="gallery3.html">Gallery 3</a></li> <li><a href="gallery4.html">Gallery 4</a></li> </ul> </li> <li><a href="products.html">Products</a> <ul> <li><a href="category1.html">Category 1</a> </head> Menú desplegable2 - html <ul> <li><a href="product1.html">Product 1</a></li> <li><a href="product2.html">Product 2</a></li> </ul> </li> <li><a href="category2.html">Category 2</a> <ul> <li><a href="product3.html">Product 3</a></li> </ul> </li> <li><a href="category3.html">Category 3</a> <ul> <li><a href="product4.html">Product 4</a></li> <li><a href="product5.html">Product 5</a></li> <li><a href="product6.html">Product 6</a></li> <li><a href="product7.html">Product 7</a></li> </ul> </li> <li><a href="category4.html">Category 4</a> <ul> <li><a href="product8.html">Product 8</a></li> <li><a href="product9.html">Product 9</a></li> </ul> </li> </ul> </li> </ul> </body> </html> Menú desplegable 2 - CSS ul a:hover { color: #8B4513; text-decoration: none; background: #DEB887;} *{ padding: 0; margin: 0; font-family: Arial, sans-serif;} ul li { border-bottom: 1px solid #FFF; border-right: 1px solid #FFF; float: left; position: relative;} body { margin: 50px; font-size: 10px; } body { behavior: url(csshover.htc);} ul { list-style: none; align:center; } ul a { color:#8B4513; text-decoration: none; display: block; padding: 5px 5px 5px 10px; width: 60px; background: #FFEBCD;} ul li ul { list-style: none; position: absolute; left: 0; top: 100%; display: none; width: 60px; border-top: 1px solid #FFF;} ul li:hover ul { display: block; } ul li:hover ul li ul { display: none; } ul li ul li:hover ul { display: block; position: absolute; left: 75px; top: -1px; border-left: 1px solid #FFF;}