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"><em><b>Home</b></em></a></li>
<li><a href="index-1.html"><em><b>About us</b></em></a></li>
<li><a href="index-2.html"><em><b>Services</b></em></a></li>
<ul>
<li><a href="index-2.html"><em><b>Dog Boarding</b></em></a></li>
<li><a href="index-2.html"><em><b>Cat Boarding</b></em></a></li>
</ul>
<li><a href="index-3.html"><em><b>Customers</b></em></a></li>
<li><a href="index-4.html"><em><b>Events</b></em></a></li>
<li><a href="index-5.html"><em><b>Gallery</b></em></a></li>
<li><a href="index-5.html"><em><b>Media Coverage</b></em></a></li>
<li><a href="index-5.html"><em><b>Contact Us</b></em></a></li>
</ul>
<br />
</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;
}