zusätzliche Navigation in bestehendes css einfügen

[tollus]

Hallo an alle...
Ich will meine webseite erneuern und habe ein layout gefunden was mir ganz gut gefällt.
Dazu gehören 2 css Dateien. Nun möchte ich aber gern eine zusätzliche seitliche Navigation links und rechts einfügen (und auch den Bereich abteilen). Ich habe schon alles mögliche versucht, aber es gelingt mir nicht.
die Seite als angefangenes Beispiel habe ich unter http://www.irislemke.de/Test/
Das soll die Erneuerung von www.sourceofmoney.de werden

der eine css text sieht so aus


/*klapp-menü */

#all {
width:840px;
height:100%;
padding: 0px;
margin:0 auto;
text-align:center;
}

/* menue oben */

.menu {
width:100%;
height:40px;
background-color:#fff;
position:relative;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#4f4f4f;
background-color:#F7F7F7;
font-family:verdana, sans-serif;
font-size: 12px;
font-variant:normal;
overflow:hidden;
width: 116px;
margin:1px 1px 1px 1px;
border:solid 1px #CFCFCF;
line-height:39px;
text-align:center;

}
.menu ul {
padding:0;
margin:0 auto;
list-style: none;
}
.menu ul li {
float:left;
position:relative;margin:0px 0px 0px 0px;
}
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
background-color:#fff;
color:#000;
text-decoration:none ;
border:solid 1px #bfbfbf;
margin:1px 1px 1px 1px;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:42px;
left:0;
width:206px;
}
.menu ul li:hover ul li a.hide {
background-color:#EFEFEF;
color:#000;
}
.menu ul li:hover ul li:hover a.hide {
background-color:#efefef;
color:#000;
}
.menu ul li:hover ul li ul {
display: none;
}


/* farb-änderungen der aufklapp-untermenüs, zb seite 11 bis 14 */
.menu ul li:hover ul li a {
display:block;
background-color:#EFEFEF;
color:#000;
font-style:italic;
border:solid 1px #bfbfbf;
line-height:40px;
background-repeat:repeat;
-moz-opacity: 0.70;
opacity: 0.70;

}

/* farb-änderungen nur eines einzelnen punktes der aufklapp-untermenüs, zb. seite 11*/
.menu ul li:hover ul li a:hover {
background-color:#fff;
color:#000;
text-decoration:none ;
border:solid 1px #bfbfbf;}


/* =============================================================== */



/* menue unten */

#menu1 a, #menu1 a:visited , #menu1 a:active {display: block;
color:#7F7F7F;
font-size: 14px;line-height: 20px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:20px;
line-height:20px;
text-align:center;
background-color:#;
text-decoration:underline ;
}

#menu1 a:hover {color:#000; text-decoration:none ;
background:transparent;
text-decoration:none ;
}

/* =============================================================== */

/* allgemeine links im text */

a:link, a:visited, a:active{
font-size: 16px;line-height: 22px;
font-family: tahoma,verdana,arial,helvetica, verdana, tahoma, sans-serif;
text-decoration:underline;color:#707070;}

a:hover{ text-decoration:none;background-color:#CFCFCF;
color:#7F7F7F;text-decoration:none;}

/* =============================================================== */

[Azra]

Diese Templates sind technisch Schrott, bzw. sind Tabellen-Layouts veraltet.
Da das ganze also mit <table>-Tags aufgebaut ist, ist das eine schweine Arbeit eine weitere Zeile einzufügen.
Am einfachsten wäre es, das ganze mit Containern neu aufzubauen, vielleicht gibt es jemanden im Forum http://www.der-webdesigner.net der das Layout unentgeltlich umsetzt.

Das ganze hat also eher etwas mit HTML statt CSS zu tun, da Tabellen normale HTML-Tags sind und auch mit HTML Befehlen formatiert werden können - oder eben CSS.
<div> (Container) werden vollständig mit CSS formatiert darum passt deine Frage nicht ganz in dieses Forum.