Necesito una ayudita con mi menu

vec · #1 (**permalink**) 05/03/2011, 10:59

Hola amigos... lo habia posteado en HTML pero un amigo nuestro me recomendo hacerlo en CSS, por eso lo posteo en esta seccion porque no tengo experiencia alguna al respecto.

Necesito un menu horizontal pero que las subopciones aparezcan en forma vertical debajo de cada opcion principal.

Alguien me dio este codigo...

A estre codigo que nos dejos nuestro amigo...

<ul id="menu">
<li><a href="opcion1.html">Opción 1</a></li>
<li><a href="opcion2.html">Opción 2</a>
<ul>
<li><a href="subopcion1.html">Opción 2-1</a></li>
<li><a href="subopcion2.html">Opción 2-2</a></li>
</ul>
</li>
<li><a href="opcion3.html">Opción 3</a></li>
</ul>

Pero quiero que Opcion 2-1 y Opcion 2-2 aparezcan debajo de Opcion2

Ahi esta mi problema porque no se como hacerlo :(

Y si no es mucho pedir necesito algo sencillo porque no soy tan experta en esto :)

Muchas gracias por cualqueir ayuda que me puedan brindar... que tengna un maravillo dia.

sanxuan · #2 (**permalink**) 05/03/2011, 14:34

Esta suele ser una referencia habitual aquí.
http://www.forosdelweb.com/f53/menu-...00-css-595007/

Lo que preguntas podría hacerse usando las propiedades display:none para ocultar el submenu y display:block para mostrarlo. Te pongo un ejemplo simple, pero no te lo recomiendo. No queda muy bien salvo que se despliegue haciendo click y para eso usaría javascript.
#menu li ul{ display:none;}
#menu li:hover ul {display:block}
La apariencia la dejo de tu parte.

vec · #3 (**permalink**) 07/03/2011, 13:41

La verdad no entendi... donde coloco esa sentencia.. luego de la opcion princuipal y antes de que comiencen las subopciones???

vec · #4 (**permalink**) 07/03/2011, 15:12

Estoy super perdida... Paso el codigo que tengo y si alguien bvondadoso lo puede ver y decirme como hago subcategoria vertical.. porque en este momento lo muestra en form horizontal, pero erroneamente. Desde ya un millon de gracias

El codigo del home page es.....

<div class="tail-top">
<div class="tail-top1">
<div class="tail-bottom">
<div class="main">
<div id="header">
<div class="menu">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="index-1.html">About us</a></li>
<li><a href="index-2.html">Services</a></li>
<ul>
<li><a href="index-2.html">Dog Boarding</a></li>
<li><a href="index-2.html">Cat Boarding</a></li>
</ul>

<li><a href="index-3.html">Customers</a></li>
<li><a href="index-4.html">Events</a></li>
<li><a href="index-5.html">Gallery</a></li>
<li><a href="index-5.html">Media Coverage</a></li>
<li><a href="index-5.html">Contact Us</a></li>
</ul>

 
</div>

y el codigo del CSS es...
/* CSS Document */
* { margin:0; padding:0;}
html, body { height:100%; }
body {
font-size:100%;
line-height:1em;
min-width:960px;
background:#1e0c00
}
html, input, textarea { font-family: Arial, Helvetica, sans-serif;
color:#e6d9c6; }

.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
object { vertical-align:top; outline:none}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container {
overflow:hidden;
width: 100%;
text-align: justify;
}
a img{ border:0}
img{ vertical-align:top; }

a{color:#ffe491; text-decoration:underline; outline:none}
a:hover{
text-decoration:blink
}

.link{color:#ede6c4;}

#content ul{margin:0; padding:0; list-style:none;}
#content ul li{background:url(images/marker.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:12px; }
#content ul li a{color:#ede6c4; text-decoration: none; line-height:1.69em; font-weight:bold}
#content ul li a:hover { text-decoration:underline; }

.link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#fffef6; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:1.38em}
.link-1 b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:4px 16px 8px 15px; font-weight:normal; font-style:normal;}
.link-1:hover{ text-decoration:none; color:#000000}

/*header*/
#header {font-size:1.1875em; color:#FFFFFF }
#header .logo{ margin:16px 0 0 379px }
#header .slogan{ margin:132px 0 0 45px }
#header .menu{
margin:154px 0 0 49px;
position:absolute;
width:1030px;
left: -20px;
top: -5px;
height: 129px;
}
#header .icon{margin:93px 0 0 859px; position:absolute;}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline; padding:0; vertical-align:top}
#header ul li a{color:#d5b781; text-decoration:none; font-size:1em; font-style:italic; text-transform:none; float:left; padding:0; margin:0; }
#header ul li a b { display:block; font-weight:normal; padding:0 23px 0 23px; line-height:40px}
#header ul li a em{ display:block; font-weight:normal; font-style:normal }

#header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}

#header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }

/*content*/
#content{
font-size:0.8125em;
width:100%;
text-align:center;
font-family:"Comic Sans MS"
}
#content .indent-main{padding:0 0 30px 22px}
#content .indent-main1{padding:37px 0 30px 22px}
#content .indent-main2{padding:37px 15px 30px 22px}
#content .title{ margin-bottom:16px}
#content .img-left{ float:left; margin:0 20px 16px 0}
#content .img-left1{ float:left; margin:0 14px 16px 0}
#content .img-indent{ margin:0 0 16px 0}
#content p{ margin:0 0 17px 0}
#content .p{ margin:0}
#content .p1{ margin:0 0 17px 0}
#content h1{
color:#000;
font-size:14px;
margin-bottom:13px;
line-height:1.2em;
font-family: "comic Sans MS";
font-weight: bold;
}
#content .color{
color:#230d00;
font-family: "comic Sans MS";
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
}
#content .color1{
color:#ffeaa8;
}
#page #content h2{color:#fff8d7; font-size:2.46em; margin-bottom:5px; line-height:1.2em }
#content h2{
color:#fff8d7;
font-size:2.46em;
margin-bottom:21px;
line-height:1.2em;
text-align: left;
}
#content h4{color:#ede6c4; font-size:1em;}
#content .tail{ background:url(images/tail.gif) bottom repeat-x; padding-bottom:25px; margin-bottom:25px}
.txt{ color:#ede6c4; float:right; display:block; }

#content .indent{padding:40px 0 0 0}
#content .indent1{
margin:-28px 0 0 0;
position:relative;
}
#content .indent2{margin:-15px 0 0 0; position:relative; display:block}
#content .indent3{padding:0 0 0 197px}

.block{ background:url(images/bg_block.gif) top left no-repeat; width:960px; height:265px; color:#8e7b69}
.block .indent-block{ padding:35px 0 0 202px; }
.block a{ color:#bb7631}
.block .button{color:#fff; background:url(images/button.gif) top left no-repeat; width:112px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em }
.block .button:hover{text-decoration:none; color:#000 }
#content .block p{ margin:0 0 17px 0}

.button1{color:#fffef6; background:url(images/button1.png) top left no-repeat; width:111px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button1:hover{text-decoration:none; color:#000 }
.button2{color:#fffef6; background:url(images/button2.png) top left no-repeat; width:68px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button2:hover{text-decoration:none; color:#000 }
.button3{color:#fffef6; background:url(images/button3.png) top left no-repeat; width:85px; text-align:center; line-height:28px; padding-bottom:5px; display:block; text-decoration:none; font-size:1.38em; float:left }
.button3:hover{text-decoration:none; color:#000 }

/*footer*/
#footer { color:#8c5e44; font-size:0.75em; text-align:center; background:url(images/bot1.gif) top center no-repeat }
#footer .indent-footer{ padding:30px 50px 0 50px;}
#footer a {
color:#FFC;
text-decoration:underline
}
#footer a:hover {
text-decoration:none;
color: #FFC;
background-image: url(images/bot1.gif);
}

.indent-2{ position:relative; padding-left:20px; float:left}
.h{ height:38px}
.h1{ height:30px; background:url(images/bg_input.gif) top left no-repeat}
.block-contact span{ float:right; margin-right:0}
input{
border:1px solid #b4a28f;
background:#846e5a;
width:264px; height:18px;
font-size:1em;
padding-left:5px;
padding-top:2px
}
textarea{
border:1px solid #b4a28f;
background:#846e5a;
width:285px; height:73px;
font-size:1em;
padding-left:5px;
margin-bottom:21px;
overflow:auto}
#page1 .tail-top .tail-top1 .current .main #footer .indent-footer strong font b {
color: #FFC;
}
#page1 .tail-top .tail-top1 .tail-bottom .main #content .indent-main .container .col-3 ul {
font-family: "comic Sans MS";
font-size: 16px;
font-weight: bold;
}

sanxuan · #5 (**permalink**) 07/03/2011, 15:50

El código que incluí en mi comentario es CSS y formaría parte del css de tu página. No lo he probado porque es sólo un ejemplo demostrativo, pero supongo que funcione según está.

vec · #6 (**permalink**) 07/03/2011, 16:39

Yo puse el codigo de mi CSS... pero no me doy cuenta donde deberia ponerlo... :(
Soy una neofita en esto.. perdon..

sanxuan · #7 (**permalink**) 07/03/2011, 17:10

Bastará con que lo añadas al final del css.
Si nunca has usado css quizás sea buena idea recurrir a algún manual para aprender lo más básico.

jomaruro · #8 (**permalink**) 08/03/2011, 11:05

Hola:

Introducción a CSS.

Saludos.

victsand · #9 (**permalink**) 08/03/2011, 11:26

Te recomiendo que busques un menu ya echo solo de implementar en tu sitio, y modificalo a tu gusto.

Yo te puedo mandar un ejemplo si tu lo deseas.

vec · #10 (**permalink**) 08/03/2011, 23:29

Lo apreciaria muchisimos... gracias por la cooperacion.

vec · #11 (**permalink**) 09/03/2011, 23:07

Gracias amigo Jomaruro... ya lei los dos libros de CSS.. ahora se un poquito mas y entiendo mejor... pero aun asi.. no se como resolver este problema del submenu vertical.... intente implementar varias cosas peorno me ha funcionado....

buaaaaaaaaaaaaaaaaaaaaaaa!!!! :(

vec · #12 (**permalink**) 10/03/2011, 02:13

Arme un archivo separado con el nombre index.html y trabaja como quiero... ahora cuando lo incorporo al real archivo, test.html y style.css no trabaja de la misma manera... ya intetne varias cosas y la verdad no me doy cuenta que puede ser... lo comprimi los cuatro archivos y lo deje en este link

http://www.sos-designs.com/index.zip

Puede alguien amable ver que pasa... desde ya muchas gracias...