Problema 2 menus desplegables con mismo css

[wmdiseno]

Hola buenas noches a todos soy nuevo en el foro, soy medio novato investigando investigando y estudiando las claves ya se manejar mas o menos el diseño web y queriendo aprender al máximo de los expertos, que son todos ustedes aqui en este bonito foro que desarrollo web.

Mi duda es la siguiente.

hize una pagina web, que es una pasteleria, le agrege un menu desplegable, con acciones y fondo que concordara con la pagina a su estilo, le quise agregar otro con el mismo codigo pero en vertical, porque el otro es en horizontal. los mismo divs pero diferente css de tamaño para que quedara en horizontal pero no me explico porque se unieron, repito los estilos css, asi un ejemplo le cambio el porcentaje de ancho o alto (height o width al tantos pixeles px) y se cambia al otro sin modificar nada del otro menu desplegable, checando las situacion. la solucione con diferente codigos de divs y css, de una pagina que se hace menu desplegable a tu estilo, quedo perfecto! hasta que quise meter una caja de registro, nombre y contraseña con codigo css y el accion del boton (codigo) ''registrar'' con method post index.php donde esta todo el codigo php. de eso no tengo problema utilizo la base de texto por mysql, pero no se porque al agregar la caja de (nombre y contraseña) se modifica el estilo del menu desplegable (css)

pongo captura de pantalla (para que se den una idea):


Codigo: de menu desplegable. (css)

Código HTML:

<style type="text/css">
 
    * {
        
        padding:0px;
        margin:0px;
    
     }
    #header {
        margin:auto;
        width:px;
        font-family:Arial, Helvetica, sans-serif;
        z-index: 1;
        position:relative ;
        
        
    }
    
    ul, ol {
      list-style:none;  
   }
   .nav li a {
       background-color:#AE8452;
       color:#fff;
       text-decoration:none;
       padding:11px 10px;  
       display:block;
    }
    
    .nav li a:hover { 
    background-color:#FFC7B0;}
    
    .nav > li {
        float:left; 
 
    }
    
    .nav li ul {
        display:none;
        position:absolute;
        min-width:140px; 
    
 
    }
    
    .nav li:hover > ul { 
       display:block;
    
    }
    
    .nav li ul li { 
    position:relative;      
    }
 
    .nav li ul li ul {
    right:-140px;
    top:0px;
    
    }
     #slider {
               
                z-index: -1;
                position: relative;
                width:1050px;
                height:334px;
                
                
                /*IE bugfix*/
                padding:0;
                margin:0;
            }
            
            #slider li { list-style:none; }
            
            #page {
                width:1050px;
                margin:0px auto;
            }
    
    
    </style>
 

Ahora codigo de registro: nombre y contraseña css!

Código HTML:

<style> 
        <style> 
        *{ 
            font-size: 3px; 
            font-family:Arial, Helvetica, sans-serif 
        } 
        form.registro{ 
            background: none repeat scroll 0 0 #FFC9B2; 
            border: 1px solid #AE8552; 
            margin: 0 auto; 
            padding: 0px; 
            width: 192px;
            height: 197px; 
            box-shadow:0px 0px 10px black;  
            border-radius:0px;    /* dejar esquinas curviadas o cuadradas del cuadro */
            position:relative; 
            top:0px; 
        } 
        form.registro div {
            margin-bottom: 2px; 
            overflow: hidden; 
        } 
        form.registro div label { 
            display: block; 
            float: center; 
            line-height: 16px;
            margin-bottom: 6px;     /* tamaño de boton */
            margin-left: 7px;
            
             
        } 
        form.registro div input[type="text"], form.registro div input[type="password"] { 
            border: 1px solid #DCDCDC; 
            float: center; 
            padding: 3px 17px; 
            margin-left: 10px;
        } 
        form.registro div input[type="submit"] { 
            background: none repeat scroll 0 0 #AE8552; 
            border: 1px solid #C6C6C6; 
            float: right; 
            font-weight: bold; 
            padding: 3px 3px;      /* Tamaño de cuadro */
            margin-left: 10px;   /* marge a la izquierda cuadro blanco */
            margin-right: 7px;     /* Tamaño a la derecha cuadro blanco */
        
        } 
        .error{ 
            color: red; 
            font-weight: bold; 
            margin: 10px; 
            text-align: center; 
        } 
 
</style>
<link href="index.css" rel="stylesheet" type="text/css">
<form action="index1.php" method="post" class="registro"> 
<div><label><br>
  Usuario:</label> 
<input type="text" name="usuario"></div> 
<div><label>Clave:</label> 
<input type="password" name="password"></div> 
 
 
<div><input type="submit" name="enviar"  value="Registrar">
 
 
<style type="text/css">
 
 a:link {
font-size:12px;
 
} 
 a:visited {
font-size:12px;
} 
 a:active {
font-size:12px;
}
 a:hover {
font-size:12px;
}
 
 
a:link {text-decoration:none; color: #AE8552;} /* Link no visitado*/
a:visited {text-decoration:none; color:#AE8552} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00; background:#EEEEEE} /*Link activo*/
a:hover {text-decoration:underline; color:#AE8552; background: #FFC9B2} /*Mause sobre el link*/
</style>
 
 
<div class='recuperar'>
  <p align="left"><a href="recuperar.php" class="recuperar" onClick="return confirm('¿Realmente deseas recuperar su contrase&ntilde;a?')">
Olvid&oacute; su Password?<br>
  
  </a><a href="tu link" onClick="return confirm('¿Realmente deseas recuperar su usuario?')">Olvid&oacute; su Usuario?</a>  </div>
</form> 
</style>
 

Cualquier respuesta seria de mucha ayuda, para resolver este problema que me anda sacando las pocas neuronas que tengo en la cabeza, Bah!

Gracias!