submenu settings problem

[filipa]

I'm having problems defining a submenu link whith the CSS setting of a current page. It works properly on the menu but i can't figure what's wrong with the submenu.
Forgive me if this is a basic error but i'm a beginner is html and CSS.

Thanks by advance.

HTML code:

<div id="wrap">
	
	<div id="header">				
			
		<img src="images/logo.jpg" alt="" width="284" height="77" align="left" class="float-left" />
		
		<p id="info"><span class="green"><strong>Informações:</strong><span class="s20font"> 275 098 256</span></span></p>	
		<p id="info2"><span class="blue">Segunda a sexta: 10h00-13h00 e 14h00-19h00</span></p>
               
			
		<!-- Menu Tabs -->
		<ul>
			<li><a href="index.html"><span>Início</span></a></li>
            <li><a href="centro.html"><span>Quem Somos</span></a></li>
			<li id="current"><a href="servicos.html"><span>Serviços</span></a></li>
			<li><a href="pre-inscricoes.html"><span>Pré-inscrições</span></a></li>
            <li><a href="recrutamento.html"><span>Recrutamento</span></a></li>
            <li><a href="contactos.html"><span>Contactos</span></a></li>				
		</ul>	
													
	</div>	
				
	<!-- content-wrap starts here -->
	<div id="content-wrap">		
											
	<img src="images/headerphoto.jpg" alt="headerphoto" width="870" height="184" align="absmiddle" class="no-border" />
		
		<div id="sidebar" >									
				
      <h1>Serviços</h1>
            <ul class="sidemenu">
                <li id="current"><a href="formacoes.html">Formações</a></li>
            </ul>   
                <ul class="submenu">
                
				 	<li id="active"><a href="formadores.html">Professores e Formadores</a></li>
                 	<li>Segurança e Higiene no Trabalho</li>
				 	<li>Línguas e Literaturas Estrangeiras</li>
                    <li>Informática</li>
				 	<li>Contabilidade e Fiscalidade</li>
                    <li>Veículos a Motor</li>
                    <li>Segurança Rodoviária</li>
                 </ul>
            <ul class="sidemenu">    
                <li><a href="explicacoes.html">Explicações</a></li>                
                <li><a href="apoiopsicopedagogico.html">Apoio Psicopedagógico</a></li>
                <li><a href="otl.html">Ocupação de Tempos Livres</a></li>
                <li><a href="traducoeseapoiotrb.html">Traduções/Apoio em trabalhos</a></li>
       		 	<li><a href="salas.html">Utilização Livre das Salas</a></li>					
			</ul>		
			<br />
		</div>
			
		<div id="main">
			
            <p><span class="s10font"><span class="blue"> > <a href="index.html">Início</a> 
            > <a href="servicos.html">Serviços</a> > <a href="formacoes.html">Formações</a>  
            > Professores e Formadores</span></span></p>
            
            <h5><a href="formacaoinicial.html">Formação Pedagógica Inicial de Formadores</a></h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero.</p>
            
            <br />      
          
         	<h5><a href="formacaocontinua.html">Formação Contínua
             de Formadores</a></h5>
         	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero.</p>
            
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            
      </div>										
	<!-- content-wrap ends here -->		
	</div>

	<!-- footer starts here -->	
	<div id="footer">
	
		<div class="footer-left">
		
			<p class="align-center">			
			&copy; 2009 <strong>Globo do Saber</strong> - Centro de Explica&ccedil;&otilde;es e Apoio Escolar |
			Todos os direitos reservados.</p>		

		</div>
	
	<!-- footer ends here -->
	</div>
	
<!-- wrap ends here -->
</div>

CSS code:

/* top elements */
* { padding: 0; margin: 0; }

body {
	margin: 0;
	padding: 0;
	color: #000000;
	background: #A9BAC3 url(bg.gif) repeat-x;
	text-align: center;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 0.7em;
	line-height: 1.6em;
}

/* links */
a {
	text-decoration: none;
	color: #4E6CA8;
	background-color: inherit;
}
a:hover {
	color: #FFA930;
	background-color: inherit;
}

/* headers */
h1, h2, h3, h4, h5 {
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
}
h1 {
	font-size: 2em;
	color: #9EC630;
	border-bottom : 1px dotted rgb(153, 153, 153);
}
h2 {
	font-size: 2em;
	color: #9EC630;
	border-bottom : 1px dotted rgb(153, 153, 153);
} 
h3 { font-size: 1.4em;
	 color: #9EC630;
}
h4 { font-size: 1.4em; color: #4E6CA8;}
h5 { font-size: 17px; color: #4E6CA8;}

p {
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
}
h1 {
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 15px;
}
h2 {
	margin-top: 35px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 15px;
}
h3 {
	margin-top: 40px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 15px;
}
h4, h5 {
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 15px;
}
ul, ol {
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 0px;
	margin-bottom: 10px;
	color: #000;
	padding-top: 0;
	padding-right: 15;
	padding-bottom: 0;
	padding-left: 0;
}
ul span, ol span {
	color: black; 
}

/* images */
img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
img.no-border {
	border: none;
}
img.float-right {
  margin: 0px 0px 0px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #568EB6;
}
a:hover img {  
  border: 2px solid #CCC !important; /* IE fix*/
  border: 2px solid #568EB6;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 20px;  	
  	background: #FAFAFA;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #4E6CA8;   
	color: #4E6CA8;
	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 
}

/* form elements */
form {
	padding: 0;
	border: 1px solid #C0C0C0;
	background-color: #FAFAFA;
	margin-top: 10px;
	margin-right: 110px;
	margin-bottom: 10px;
	margin-left: 135px;
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 3px;
	border:1px solid #C0C0C0;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
select {
	padding: 3px;
	border:1px solid #C0C0C0;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:325px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #C0C0C0;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 5px 15px; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #C0C0C0;
	background: #FFF; 
	padding: 4px 5px; 
	color: #4E6CA8;	
}


/***********************
	  LAYOUT
************************/
#wrap {
	background: #FFF;
	width: 870px;
	height: 100%;
	margin: 0 auto;
	text-align: justify;
}
#content-wrap {
	clear: both;
	margin: 0; padding: 0;	
	background: #FFF;
}

/* header */
#header {
	position: relative;
	height: 105px;	
	background: #000 url(headerbg.gif) repeat-x 0% 100%;
	background-color:#FFF
}
#header p#info {
	text-align:right;
	margin: 0; padding: 8px 0 0 0;
	font: 11px Tahoma, 'trebuchet MS', Sans-serif;
	letter-spacing: 0px;
	text-color: #9EC630;
	top: 0; left: 5px;	
}
#header p#info2 {
	text-align:right;
	margin: 0; padding: 0;
	top:35px; left: 95px;
	color: #666666;
	text-indent: 0px;
	font: 9px Tahoma, 'trebuchet MS', Sans-serif; 
	text-transform: none;
}	
#header form.searchform {
	position: absolute;
	top: -6px;
	right: -11px;
	height: 58px;
}

/* main */
#main {
	float: left;
	width: 70%;
	text-align: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	padding-top: 20;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin: 0px;
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 15px 0 15px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
	float: left;
	width: 60mm;
	margin: 0;
	background-color:#F0FEDE;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 5px;
	border-right-style: solid;
	border-right-color: #DBE2F0;
	border-right-width: 5px;
}
#sidebar ul.sidemenu {
	list-style:none;
	padding:0;
	font-size: 12px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 15px;
}
#sidebar ul.sidemenu li {
	margin-bottom:4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C5D0E8;
}
#sidebar ul.sidemenu a {
	display:block;
	font-weight:bold;
	color: #4E6CA8;
	min-height:18px;
	background-image: none;
	white-space: nowrap;
	border-left-width: 0px;
	border-left-style: none;
	border-top-width: 0px;
	border-top-style: none;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-right-style: none;
	border-bottom-style: none;
	padding-top: 6px;
	padding-right: 5px;
	padding-left: 1px;
	padding-bottom: 0px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
	color: #4E6CA8;
	background-color: #DBE2F0;
	border-left-width: 0px;
	font-size: 12px;
}
#sidebar ul.sidemenu  #current{
	background-color: #DBE2F0;
}

#sidebar ul.submenu {
	list-style:none;
	padding:0;
	font-size: 11px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 27px;
}

#sidebar ul.submenu li {
	margin-bottom:4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C5D0E8;
	color: #4E6CA8;
}

#sidebar ul.submenu a {
	display:normal;
	font-weight: normal;
	color: #4E6CA8;
	min-height:18px;
	background-image: none;
	white-space: nowrap;
	padding-top: 0px;
	padding-right: 5px;
	padding-left: 0px;
	padding-bottom: 0px;
}

* html body #sidebar ul.submenu a { height: 11px; }

#sidebar ul.submenu a:hover {
	color: #4E6CA8;
	background-color: #F0FEDE;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: -1px;
}

#sidebar ul.submenu  #active{
	font-size: 11px;
	font-weight: bold;
}	
	
/* Footer */
#footer {
	clear: both;
	color: #FFF;
	background: #A9BAC3;
	margin: 0;
	padding: 0;
	height: 50px;
	font-size: 95%;
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: #4E6CA8;
}
#footer a { 
	text-decoration: none; 
	font-weight: bold;	
	color: #FFF;
}
#footer .footer-left{
	float: left;
	width: 100%;
}
#footer .footer-right{
	float: right;
	width: 30%;
}

/* menu tabs */
#header ul {
	z-index: 999999;
	position: absolute;
	margin:0;
	padding: 0;
	list-style:none;
	right: 0px;
	bottom: 6px !important;
	bottom: 5px;
	width: 516px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin-left:1px;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
	float:none;
	display:block;
	background: url(tabright.gif) no-repeat right top;
	color: #FFF;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-left: 4px;
}
/* End IE5-Mac hack */
#header a:hover span {
	color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
	color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
	color: #FFF;
}
/* end menu tabs */

/* alignment classes */
.float-left  { float: left; }
.float-right {	float: right; }
.align-left  {	text-align: left; }
.align-center  { text-align: center; }
.align-right {	text-align: right; }

/* additional classes */
.clear { clear: both; }
.green { color: #9EC630; }
.blue  { color: #4E6CA8; }
.orange { color: #FFA930;}
.black { color: #000000;}
.red { color: #FA2E2E}
.gray  { color: #777777; }
.s9font { font-size: 9px; }
.s10font { font-size: 10px; }
.s11font { font-size: 11px; }
.s13font { font-size: 13px; }
.s14font { font-size: 14px; }
.s16font { font-size: 16px; }
.s18font { font-size: 18px; }
.s20font { font-size: 20px; }
.right {float: right;}

/* second menu tabs */
#menu {
	float: left;
	width: 70%;
	text-align: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	height: 40px;
	vertical-align: top;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}


#menu ul {
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
}
#menu li {
	display:inline;
}
#menu a {
	text-decoration:none;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 10px;
	float: left;
	width: 120px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding-top: 8px;
}
#menu a span {
	float:none;
	display:block;
	color: #F63;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFAC59;
}
#menu #current a span {
	border-bottom-color: #F63;
	border-bottom-width: 2px;
}