Crear un menu para blog (urgente) [EXPLICACION INSIDE]

ja_rule · #1 (**permalink**) 15/09/2009, 20:24

Holaa compañeros!!

Bueno desde hace una semana llevo abriendo un Blog en blogger para poder vender mis articulos y bueno pues me he quedado estancad@ en el menu, porque lean... he cambiado la apariencia total de mi blog de Blogger (google) poniendole una plantilla del exterior, comprandole un dominio, quitandole la barra de navegacion de blogger, etc.

Ya que se puede retocar el HTML me gustaria saber como ponerle un menu desplegable en el que apareciesen el listado de mis articulos y asu vez dentro de cada titulo del menu aparezcan unos subtitulos por asi llamarlos y enlazar cada uno de estos subtitulos a cada entrada de mi blog, de esta manera lo haria mas comodo para mis visitantes.

Saludos y gracias de antemano

PD: espero haberlo explicado claramente de tal manera que entendais lo que quiero decir.

ja_rule · #2 (**permalink**) 16/09/2009, 06:19

Agradezco previamente cualquier aporte!!

Saludos

abimaelrc · #3 (**permalink**) 16/09/2009, 06:23

porque estancad@, no estas definid@

Son bromas.
Mira, verifica si esto es lo que buscas http://www.araudi.net/ejemplos/menus...ables_CSS.html

ja_rule · #4 (**permalink**) 16/09/2009, 06:25

Cita:

Iniciado por abimaelrc

porque estancad@, no estas definid@

Son bromas.
Mira, verifica si esto es lo que buscas http://www.araudi.net/ejemplos/menus...ables_CSS.html

Muchisimas gracias por el aportes, creo que es algo de lo que estoy buscando.

GRACIAS, GRACIAS, GRACIAS

abimaelrc · #5 (**permalink**) 16/09/2009, 06:32

Pero sigo intrigado ¿por qué estancad@?

ja_rule · #6 (**permalink**) 16/09/2009, 06:35

Cita:

Iniciado por abimaelrc

Pero sigo intrigado ¿por qué estancad@?

Jajaj

porque la cuenta de FW la utilizamos dos personas encargadas de administrar el blog (mujer u hombre).

Por cierto donde tengo que aplicar el codigo, porque meto justamente la parte que necesito sin copiar <head> ni nada y no me aparece como quiero... ahora subo una foto de como me queda.

Saludos

ja_rule · #7 (**permalink**) 16/09/2009, 06:38

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Compositio
Designer: Design Disease y Zona Cerebral
URL: www.designdisease.com y www.zonacerebral.com
Date: 20 Feb 2009
Updated by: Iván
----------------------------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

/************** BODY, TIPOGRAFÍA, COLORES... *****************/

* { margin: 0; padding: 0; }
body { background: #c6e5f2 url(http://img182.imageshack.us/img182/2079/bodybkguq9.png) no-repeat center top; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 0px; margin-top: 0px; color:#35383d;}
input, button, textarea, select { font: normal 12px/12px "Verdana", sans-serif; color:#2d3538; vertical-align: middle; }
legend { display: none; }
fieldset { border: none; }
ul, ol { list-style: none; }
ol { list-style-type: decimal;}
table { border-collapse: collapse; width: 100%; }
hr { display: none; }
img { padding: 0px; margin: 0px; border: none; text-align: center;}

a:link { text-decoration: none; color : #0099cc; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #0099cc; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #0099cc; border: 0px; -moz-outline-style: none;}
a:hover { text-decoration: underline; color : #025d87; border: 0px; -moz-outline-style: none;}
a:focus { outline: none;-moz-outline-style: none;}

h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; }

/************** BG *****************/

#bg { width: 980px; margin: 0 auto; margin-top: 30px;}
#bg-all { width: 980px; background: #fff; overflow: hidden;}
/**/ * html #bg-all { height: 1%;} /* */

/************** CONTAINER *****************/

.container { padding: 30px; float: left; width: 590px;}

.menu { overflow: hidden; float: left; width: 100%; background:#def1f9; width: 980px; margin: 0 auto; padding: 10px 0px 0px 100px;}
/**/ * html .menu { height: 1%;} /* */
.menu ul { float:left; }
.menu li { display: inline; font: bold 14px/14px "Arial"; letter-spacing: -1px; float: left; height: 28px; }
.menu li ul li { font-weight: normal; letter-spacing: normal;}
.menu li a, .menu li a:visited { color:#272d36; float: left; padding: 4px 6px 10px 6px; margin-right: 5px; text-decoration:none; font-weight:bold;}
.menu li a:hover { background: #fff; color:#0099cc; font-weight: bold; text-decoration: none;}
.menu .current_page_item a, .menu .current_page_item a:visited, .menu .current_page_item a:hover { background: #272d36 url(http://img22.imageshack.us/img22/1411/menuonbkgsn7.png) repeat-x bottom; color:#fff; }

.menu .current_page_item .page_item a, .menu .current_page_item .page_item a:visited { background: #def1f9; color:#272d36;}
.menu .current_page_item .page_item a:hover { background: #fff; color:#0099cc; }

/************** LOGO *****************/

.logo { overflow: hidden; border-bottom: solid 6px #e6f1f3; margin-bottom: 30px;}
/**/ * html .logo { height: 1%;} /* */

.logo .txt { width: 520px; padding-left: 70px; background: url(http://img182.imageshack.us/img182/2...osymbolmu2.png) no-repeat left 10px; padding-bottom: 30px; }
.logo .txt h1 { font: bold 55px/50px "Arial"; letter-spacing: -3px; text-transform: lowercase; padding-bottom: 5px;}
.logo .txt h1 a, .logo .txt h1 a:visited, .logo .txt h1 a:hover { text-decoration: none; color:#272d36;}
.logo .txt p.desc { font: bold 14px/14px "Arial"; letter-spacing: -1px; display: block; color:#2abada;}

.logo .img { padding-bottom: 15px; }

/************** SL *****************/

.SL { width: 520px; float: left; padding-left: 70px;}

/************** FECHA *****************/

.p-time { background: url(http://img410.imageshack.us/img410/4571/ptimebkgli5.png) no-repeat right bottom; position: absolute; left: -70px; width: 50px; padding-bottom: 10px; }
/**/ * html .p-time { left: -70px;} /**/
.p-time strong { float: left; text-align: center;}
.p-time .day { font: normal 20px/18px "Arial"; letter-spacing: -1px; color:#fff; width: 40px; padding: 7px 0px; background:#2abada; overflow: hidden; }
.p-time .month { background:#dedede; width: 40px; padding: 3px 0px; margin-bottom: 10px;}
.p-time .year { background: #fff; border: solid 1px #dedede; font: normal 11px/11px 'Verdana'; padding: 12px 5px; color:#bababa;}

/************** POSTS *****************/

#main-wrapper {
width: 100%; position: relative;
/**/ * html #main-wrapper { width: 99%;} /**/
}

.post-title {padding:0 0 2px 0;}
.post h3 { color:#272d36; font: normal 34px/34px "Helvetica"; letter-spacing: -1px; }
.post h3 a, .post h3 a:visited { color:#272d36; text-decoration:none;}
.post h3 a:hover { color:#0099cc; text-decoration: none;}

.post-header-line-1 {font: normal 11px/14px 'Arial'; text-transform: uppercase; color:#999; padding-bottom:15px;}
.post-author {text-decoration: underline; color:#999; padding-right: 5px;}

.post-body { border-top: solid 1px #dbdbdb;}
.post-body p { font: normal 12px/19px "Verdana"; padding: 5px 0px; margin: 5px 0px;}
.post-body ol { list-style: decimal inside; }
.post-body ol { padding: 10px 0px 10px 25px; margin: 0px; }
.post-body ol li { padding: 2px 0px 2px 0px; }
.post-body ul { padding: 10px 0px 10px 20px; margin: 0px; }
.post-body ul li { padding: 2px 0px 2px 13px; list-style-type: none; background: url("http://img527.imageshack.us/img527/8043/pconlihh7.png") no-repeat left 1px; color:#666; }
.post-body blockquote { font: italic 14px/19px Georgia, "Times New Roman", Times, serif; padding: 10px 20px; margin: 10px 0px; background: #ecf6f8; }
.post-body blockquote p { font: italic 14px/19px Georgia, "Times New Roman", Times, serif; }
.post-body blockquote li { padding: 2px 0px 2px 13px; list-style-type: none; font-size: 12px; line-height: 17px;}

.post-footer {height:30px; margin: 15px 0 30px 0;}
.post-footer-line-1 {color:#7f7f7f; display: inline; padding: 5px 0px 5px 0px; margin-right: 10px; height:30px;}
.comment-link {background: url("http://img153.imageshack.us/img153/9861/pdetcomdz6.png") left center no-repeat; font-weight: bold; letter-spacing: -1px; padding:4px 0 6px 30px; margin-right:13px;}
.comment-link a:hover, a:visited {font-weight:bold; text-decoration:none;}
.post-labels { background: url("http://img410.imageshack.us/img410/413/pdettagjz9.png") left center no-repeat; font: normal 14px/18px "Arial"; margin-right: 3px; padding:4px 0 6px 30px;}

/************** IMÁGENES *****************/

.post-body img { padding: 0; max-width: 100%; }
.post-body img.centered { display: block; margin-left: auto; margin-right: auto; padding: 1px; border: solid 1px #9b9792;}
.post-body img.alignright { margin: 5px 0 10px 20px; display: inline; border: solid 4px #eee; padding: 1px; }
.post-body img.alignleft { margin: 5px 20px 10px 0; display: inline; border: solid 4px #eee; padding: 1px;}
.post-body .alignright { float: right; }
.post-body .alignleft { float: left }

/************** NAVEGACIÓN *****************/

#blog-pager-newer-link {float: right; background:url(http://img410.imageshack.us/img410/310/navrightho2.png) no-repeat right 0px; padding: 2px 20px 2px 0;}

#blog-pager-older-link {float: left; background:url(http://img410.imageshack.us/img410/5504/navleftso6.png) no-repeat left 0px; padding: 2px 0 2px 20px;}

#blog-pager {overflow: hidden; padding-bottom: 20px;}

/************** SIDEBARS *****************/

#SR { width: 300px; margin: 0 30px 0 0; float: right; clear:right;}
#SR2 { width: 300px; height:100%; margin: 0 30px 3px 0; padding: 0 0 10px 0; float: right; background: #d1f0e2; clear:right;}
#SR3 { width: 300px; margin: 0 30px 0 0; padding: 0 0 10px 0; float: right; clear:right;}

ja_rule · #8 (**permalink**) 16/09/2009, 06:40

/************** WIDGETS *****************/

.search { background: #3d96d5 url(http://img132.imageshack.us/img132/7...archbkgfn6.png) no-repeat left bottom; right: 0px; padding: 15px; overflow: hidden;}
/**/ *html .SR .search { height: 1%;} /**/
.search form { width: 245px; padding: 10px; border: 1px solid #3ac6e5; background: #2abada; }
.search fieldset { overflow: hidden; height: 1%; }
.search input { float: left; margin-right: 2px; background: url(http://img27.imageshack.us/img27/609/searchinputom6.png) no-repeat; border: none; padding: 5px 3px 5px 65px; width: 145px; color:#666;}
.search button { float: left; background: url(http://img27.imageshack.us/img27/683...hbuttonvs8.png) no-repeat; width: 26px; height: 24px; border: none; cursor: pointer; text-indent: -1000em; }
.syn ul { margin: 10px 0px;}
.syn li { background: url(http://img27.imageshack.us/img27/904/synicopj7.png) no-repeat left center; margin: 0px 5px 0px 0px; padding: 3px 0px 3px 15px; list-style-type: none; color:#ffcc66; display: inline; font: bold 14px/14px 'Arial'; letter-spacing: -1px;}
.syn li a, .syn li a:hover, .syn li a:visited {color:#fff; text-decoration:none; font-weight: bold;}

.about { background: #57abe6 url(http://img132.imageshack.us/img132/7505/aboutbkgap6.png) no-repeat left top; padding: 20px 15px 15px 15px; color:#fff;}
.about h2 { font-size: 24px; letter-spacing: -1px; color:#fff;}
.about p { padding: 5px 0px; margin: 0px; font-size: 13px; line-height: 16px;}

.photostream { width:300px; overflow: hidden; background: #9ed5e1 url(http://img27.imageshack.us/img27/873...reambkgyo2.png) no-repeat bottom left; padding: 15px 0px 25px 0;}
/**/ *html .SR .photostream { height: 1%;} /**/
.photostream h2 { padding-left:15px; font-size: 24px; letter-spacing: -1px; color:#102a30;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {width:54px; height:54px; background: url(http://img27.imageshack.us/img27/241...amlibkgus2.png) no-repeat left top; padding:5px 0 0 5px; margin: 0;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important; color:#102A30;}
#flickr_badge_wrapper {background-color:#9ed5e1; width:270px; margin:0 0 15px 0; padding:0;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#FFFFFF !important;}
.photostream .widget-content { margin:10px 0 0 10px; padding:0;}

.categs { float: left; width: 130px; overflow: hidden; margin-bottom: 3px;}
/**/ *html .SR .categs { height: 1%;} /**/
.categs .widget {padding:15px;}
.categs h2 {font: bold 15px/15px 'Arial'; letter-spacing: -1px; color:#102a30; padding-bottom: 5px;}
.categs li { padding: 1px 0px; list-style-type: none; font-size: 11px; color:#5e8a89; }
.categs a, a:visited { color:#247682; text-decoration: underline; font-weight:normal;}
.categs a:hover { color:#003333; text-decoration: underline; font-weight:normal;}

.archives { overflow: hidden; margin-bottom: 3px; float: left; width: 130px;}
.archives .widget {padding:15px;}
/**/ *html .SR .categs { height: 1%;} /**/
.archives h2 { font: bold 15px/15px 'Arial'; letter-spacing: -1px; color:#102a30; padding-bottom: 5px;}
.archives li { padding: 1px 0px; list-style-type: none; font-size: 11px; color:#5e8a89; }
.archives a, a:visited { color:#247682; text-decoration: underline; font-weight:normal;}
.archives a:hover { color:#003333; text-decoration: underline; font-weight:normal;}

.recent { background: #e1f3ee; padding: 15px; margin-bottom: 3px; }
.recent .tabs { overflow: hidden; }
.recent .tabs { height: 1%; }
.recent .tabs li { float: left; background: none; }
.recent .tabs li a { float: left; font: bold 14px/14px "Arial"; color: #102a30; padding: 3px 6px 9px 6px; background: #b5d6cd url(http://img27.imageshack.us/img27/610...nactiveck6.png) no-repeat bottom center; margin-right: 3px; letter-spacing: -1px; text-decoration: none;}
.recent .tabs li a.active, .recent .tabs li a:hover { background: #4a6969 url(http://img27.imageshack.us/img27/1006/tabsactivelq5.png) no-repeat bottom center; color: #fff; text-decoration: none; font-weight:bold;}
.recent a, #SR .recent a:visited { color:#247682; text-decoration: underline; font-weight:normal;}
.recent a:hover { color:#003333; text-decoration: underline; font-weight:normal;}

#tab-comments { display: none; margin-bottom: 5px; }
#tab-comments li { background: url(http://img27.imageshack.us/img27/9372/tabsarrowyh7.png) no-repeat left 10px; padding: 4px 0px 4px 6px; border-bottom: solid 1px #c5ded7; font-size: 11px; color:#5e8a89;}
#tab-comments li a { display: block;}
#tab-posts { margin-bottom: 5px; font-size: 11px; }
#tab-posts li { background: url(http://img27.imageshack.us/img27/9372/tabsarrowyh7.png) no-repeat left 8px; line-height: 14px; padding: 1px 0px 1px 6px;}
#tab-tags { display: none; margin-bottom: 5px; font-family: "Verdana"; line-height: 22px;}

/************** COMENTARIOS *****************/
#comments h4 { color:#272d36; font: normal 28px/28px "Arial"; letter-spacing: -1px; padding-bottom: 20px; }

#comments-block {padding-top: 20px; }
#comments-block .comment-author { background: #e1f4fc url(http://img27.imageshack.us/img27/527...taltbkgly8.png) no-repeat left top; padding: 40px 25px 3px 25px; border: none; font: bold 14px/14px "Arial" sans-serif; letter-spacing: -1px; display:block;}
#comments-block .comment-author a, a:hover {color:#000; text-decoration: none;}
#comments-block .comment-timestamp { display:block; background: #e1f4fc; }
#comments-block .comment-timestamp a, a:hover { color:#96b1bc; text-decoration: underline; font-weight: normal;}
#comments-block .comment-body { padding:25px; background: #e1f4fc; font: normal 12px/17px "Verdana"; color:#333;}
#comments-block .comment-body p { font: normal 12px/17px "Verdana"; padding: 5px 0px; margin: 0px; color:#333;}
#comments-block .comment-body blockquote { font: italic 14px/19px Georgia, "Times New Roman", Times, serif; color:#666; margin: 10px 20px; }
#comments-block .comment-body blockquote p { font: italic 14px/19px Georgia, "Times New Roman", Times, serif; color:#666; }
#comments-block .comment-footer { background: #e1f4fc; margin:0 0 20px 0;}

.deleted-comment {
font-style:italic;
color:gray;
}

/************** PERFIL *****************/
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 5px solid #E7E9E3;
}

.profile-data {
margin:0;
font: arial;
color: #000;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: #000;
letter-spacing: .1em;
}

ja_rule · #9 (**permalink**) 16/09/2009, 06:41

/************** FOOTER *****************/
.footer { width: 870px; margin: 0 auto; padding: 15px 0px 15px 90px;}
.footer p { padding: 0px; margin: 0px; font-family: 'Verdana'; font-size: 11px; }
.footer p.copy { color:#1c3e4d; }
.footer p.copy a, .footer p.copy a:visited, .footer p.copy a:hover { color:#1c3e4d; text-decoration: underline;}
.footer p.theme { padding-top: 2px; color:#6c8e9d; }
.footer p.theme a, .footer p.theme a:visited, .footer p.theme a:hover { color:#6c8e9d; text-decoration: underline;}
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>

</head>

<body>
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='day'>"+da[0]+"</strong>";
mes = "<strong class='month'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='year'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>


<div id='bg'><div id='bg-all'>

<div class='menu'>
<ul>
<li class='current_page_item'><a href='http://repliks.blogspot.com/2009/09/bienvenidos.html'><span>Inicio</span></a></li>
<li><a href='http://repliks.blogspot.com/2009/09/acerca-de-nosotros.html'><span>Conócenos</span></a></li>
<li><a href='http://repliks.blogspot.com/2009/08/presentacion-y-bases-para-realizar-una.html'><span>Bases para realizar una compra</span></a></li>
<li><a href='http://repliks.blogspot.com/2009/09/contacto.html'><span>Contacto</span></a></li>
<li><a href='http://www.repliks.com/2009/09/valoraciones-sobre-nuestro-servicio-y.html'><span>Valoraciones</span></a></li>
</ul>
</div>


<div class='container'>


<div class='logo'>
<div class='txt'>
<h1><a href='http://www.repliks.blogspot.com'>RepliKs</a></h1>
<p class='desc'>Venta de réplicas de relojes como Tag Heuer, Rolex, Hublot, PAM, Cartier, Chopard, Montblanc, Graham, etc desde 35 €/unidad</p>
</div>
</div>


<div class='SL'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

</div></div>


<div id='SR'>
<b:section class='search' id='search' preferred='yes' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='Buscar:' type='HTML'/>
</b:section>
<b:section class='about' id='about' preferred='yes' showaddelement='yes'>
<b:widget id='Image2' locked='false' title='Rolex Oyster Perpetual Date Submariner Acero-Oro' type='Image'/>
<b:widget id='Image1' locked='false' title='Tag Heuer Grand Carrera RS2' type='Image'/>
<b:widget id='HTML1' locked='false' title='Utiliza el formulario para contactarnos' type='HTML'/>
</b:section>
<b:section class='photostream' id='photostream' preferred='yes' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='HTML4' locked='false' title='Categorías' type='HTML'/>
</b:section>
</div>

<div id='SR2'>
<b:section class='categs' id='categs' preferred='yes' showaddelement='yes'/>
<b:section class='archives' id='archives' preferred='yes' showaddelement='yes'/>
</div>

<div id='SR3'>
<b:section class='recent' id='recent' preferred='yes' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>

</div></div>


<div class='footer'>
<p class='copy'>Copyright 2007 - Tublog - funcionando con orgullo en <a href='http://www.blogger.com/' style='text-decoration: none;'>Blogger</a></p>
<p class='theme'>Compositio Theme creado por: <a href='http://designdisease.com/' title='Professional Blog Design'>Design Disease</a>, <a href='http://zonacerebral.com'>Plantillas Blogger</a> y <a href='http://premiumthemes.com/'>PremiumThemes.com</a></p>
</div>
</body>
</html>

ja_rule · #10 (**permalink**) 16/09/2009, 06:42

He partido el codigo de mi blog en tres partes y me gustaria saber donde pegar el siguiente codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 8 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="español" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-8.css" type="text/css" />


</head>
<body>
<div id="principal">Menú principal
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Opción 1</a>

<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>

<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>

<ul>
<li class="primera"><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>

<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>

<ul>
<li class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>

</li>
</ul>
</div>
</div>
</body>
</html>

ja_rule · #11 (**permalink**) 16/09/2009, 13:36

Arribaaaaaaaaaaaaa