Vertikales Horizontales CSS-Menü

[12557]

Hallo Leute,

ich muss Euch leider noch mal befragen.
Ich hatte neulich Fragen zu Css-Menüs gestellt und super starke Hilfe bekommen.Nun möchte ich das Menü doch nicht mehr horizontal anordnen sondern
in einer Art misch Form. Hier ein Bsp.:

Liste 1
Liste 1
Liste 1
Liste 1 Liste 2 Liste 2 Liste 2 Liste 2
Liste 1                 Liste 3
                        Liste 3
                        Liste 3 Liste 4 Liste 4 Liste 4

Ich habe stunden lang versucht das System zu durchleuchten und zu verstehen. Aber ich bekomm es einfach nicht hin. Es Klappt so halb aber nun steck ich seit 6 Std. Fest und weiss nicht mehr wo oben und unten ist.

Hier könnt Ihr mein Menü sehen:
http://studiokruckerbates.fokminusyou.com/

Hier mal mein zusammen gestöpseltes CSS:

  
#access {  
    margin: auto;  
    padding-top: 20px;  
    width: 465px;  
}  
#access .menu-header, div.menu {  
    font-size: 14px;  
    line-height: 24px;  
    width: 100%;  
}  
#access .menu-header ul, div.menu ul {  
    list-style: none outside none;  
    width: 100%;  
    margin: 0;  
    padding: 0;  
}  
#access .menu-header li, div.menu li {  
    display: list-item;  
    position: relative;  
}  
#access a {  
    color: #000000;  
    padding: 0 20px;  
}  
#access ul li ul {  
    display: none;  
    left: 100px;  
    margin: 0;  
    position: absolute;  
    top: 0;  
}  
#access ul li ul li {  
    display: list-item;  
    position: relative;  
}  
#access ul li ul a {  
    float: left;  
    width: auto;  
}  
#access ul li ul li ul {  
    margin: 0;  
    padding: 0;  
    position: absolute;  
    top: 20px;  
}  
#access ul li ul li ul li {  
    display: block;  
    float: none;  
    max-height: 15px;  
}  
#access li:hover > a, #access ul ul *:hover > a {  
    color: #E1DDD1;  
}  
#access ul li:hover > ul {  
    display: block;  
}  
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {  
    color: #000000;  
}  
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {  
    color: #FFFFFF;  
}

In Safari geht es gar nicht mehr.
in Mozilla geht es bis zur Liste 2.
Liste 3 bekommt die Position nicht von Liste 2 obwohl ich das mit relative und absolut Positionen probiert habe.
Anbei klappen die Submenüs zu bevor man sie anklicken kann.
Puuuuuuuu

Ich hoffe jemand kann mir ein wenig helfen
Besten Gruß
und Dank

[12557]

Liebe Leute ich habe es nun doch fast geschafft.
Schaut mal:
http://studiokruckerbates.fokminusyou.com/

Jetzt bräuchte ich nur noch einen Tip bezüglich der Positionierung
der Liste 3 und 4. Irgendwie bekomme ich Sie nicht direkt unter die Buttons.
Außerdem passt es im Safari aber im Mozilla ist alles einen Ticken zu hoch.
Wie ist das möglich!?

Danke noch mal!