Problema allinamento liste ordinate

[rab]

Problema allinamento liste ordinate

Buongiorno a tutti
Ho un problema su cui sto perdendo la testa da un po' di giorni e non riesco a venirne a capo...
Ho una pagina semplicissima in html/css, composta da due menu affiancati ottenuti tramite liste (<ul>/<li>).
Il menu di sinistra (menu1) e' verticale a un livello, mentre il quello si destra (menu2) e' un menu verticale a due livelli con piu' elementi per ogni riga; il menu1 e' quello principale (a slide verticale con effetto accordion di jquery), e, le righe del menu2, tramite appositi jquery, si dovrebbero attivare e comparire solo al click dell'elemento corrispondente (nella stessa posizione verticale) del menu1.

Il problema che ho, e che non riesco in alcun modo a risolvere, e' l'allineamento dei due menu
il codice css utilizzato e' il seguente:

.menu
{
    width: 100%;
    height: 100%;
    border: 1px dashed #000;
}
#menu1
{
    float:left;
    border:1px solid;
    width: 250px;
    height:300px;
}
 ul
{
    list-style: none;
    text-align: right;
} li a {
    font-size: 10pt;
    text-decoration: none;
    outline: none;
    border:1px solid;
    height:15px;
}    
     li a:link, li a:visited {
    color: #c4c4c4;
    display: block;
    outline: none;
}
     li a:hover {
    color: #8f8e8e;
    outline: none;
}    

#menu2
{
    float:left;
    border:1px solid;
    
    margin: 0;
    padding:0;
    height:300px;
    display:inline;
}
 ul
{
    list-style: none;
    text-align: left;
    margin:0;
    padding:0;
    
}
 li
{
    margin: 0;
    padding: 0;
    display: inline;
}
 a {
    font-size: 10pt;
    text-decoration: none;
    outline: none;
    padding: 0;
    border:1px solid;
    height:15px;
    margin: 0;
}    
      li a:link, li a:visited {
    color:;
    outline: none;

}
      a:hover {
    color:;
    outline: none;
}    

```(ho inserito un border nero su ogni elemento giusto per controllare il posizionamento)
mentre l'html e' il seguente:
[html]
<div class="menu">
    <div id="menu1">
        <ul>
        <li><a href="#"><div id="port">Portfolio</div></a>
            <ul><br />
                <li><a href="#" id="sub_portraits">Portraits &amp; People</a></li>
                <li><a href="#" id="sub_fashion">Fashion &amp; Lifestyle</a></li>
                <li><a href="#" id="sub_still">Still life</a></li>
                <li><a href="#" id="sub_still">12345</a></li>
                <li><a href="#" id="sub_interiors">Interiors</a></li>
                <li><a href="#" id="sub_advert">Advertising</a></li>
                <li><a href="#" id="sub_docum">Documentary</a></li>
                <li> &nbsp;</li>
            </ul>
        </li>
        <li ><a href="#"><div id="contacts">Contacts</div></a></li>
        </ul>
    </div>
    <div id="menu2">
        <ul>    
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li>
            </ul>
        </li>
        </ul>
    </div>
</div>[/html]Chiedo quindi gentilmente a voi: come posso risolvere questo problema? :(
Grazie a tutti per il momento :)

[karedas]

Ciao Rab e benvenuto nel forum GT.

L'allineamento di cui parli intendi quello orizzontale tra la prima voce del menù di sinistra con quello di destra?
Se in poche parole vuoi eliminare lo spazio che precede la voce "PORTFOLIO" allora devi eliminare il margine di default che ha il tag "UL".

Ti basterà settare in questo modo:

ul{
margin:0;
}

In questo modo lo rimuovi ad ogni menù e sottomenù costriuto con le liste non ordinate (ul).

Oppure attribuisci un id/classe al tag ul che ti interessa e esegui la stessa procedura ma in questo modo:

es.

ul#menu_sinistra{
marigin:0;
}

Spero di aver capito