Problem with menu and submenu

[viviana]

Hi my friends.. I need your help. I have a main horizontal menu, and I want a vertical submenu. The main menu its working perfectly, but I don't know how display in vertical subopciones, below of each main option.

Thank you in advance

The code of the main page is.....
<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;
}

[Abdullahabin]

Can you post a link to the web address?
Its much easier to see the design as a page.

[viviana]

the link is...
http://www.sos-designs.com/test.html
I want under services other opcions...

[viviana]

Somebody has some ideas?? pleaseee I need helppp... thanks a lot in advance!!!

[Abdullahabin]

You want the sub menu to appear when you scroll over the main menu?

[viviana]

I create and index file.. and the menu is working. Horizontal menu with vertical options. But when I put all together under test.html and styles.css.. it's no working.
I tried everything.. and I don't know the solutions... please I need help... thanks a lot in advance...

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

[davelf]

i don't really understand what did you make here...
A menu? there's main menu and each menu have submenu

something like this?
http://dynamicdrive.com/dynamicindex1/flexdropdown.htm

Or this one?
http://dynamicdrive.com/dynamicindex1/navigate1.htm

[viviana]

Like this sample...

http://www.likno.com/?gclid=CKSs8K39w6cCFaRa7Aody2jGDA

In my files I make an example. Index.html has a main horizontal menu and vertical submenu, and works perfectly. But when I copy this code to test.html and style.css.. doesn't work. It's crazy.
I don't know where is the error