How to create multiple menus on the same page with xhtml

I'm not able to put on the same page, for example two menus.

I'll explain. I use unordered lists and the inline display to create a horizontal menu.

I do the same to below the page to create another.

What I think is failing is to individualize both. For this I am using the ID in ul and in li of the two menus. In menu 1 I am using a different ID for ul and another for li (in the case of lists I use the same ID name for all). And I do the same for the second clear menu that the ID's are different from the first menu.

Well, the goal is to have the ability to use independent formatting. I can not do it.

I've been staring at many websites and books and find nothing. Can someone help me? I'm taking the first steps in practice. Thank you.

Below are an example. I did not put everything right like for example etc is just what matters for the exercise

<ul class="menu1">
    <li><a href="#">EXEMPLO</a></li>
    <li><a href="#">EXEMPLO</a></li>
    <li><a href="#">EXEMPLO</a></li>
</ul>

<ul class="menu2">
    <li><a href="#">EXEMPLO</a></li>
    <li><a href="#">EXEMPLO</a></li>
    <li><a href="#">EXEMPLO</a></li>
</ul>

Then in the css it looks like this:

.menu1 ul {
    list-style-type: none;
    padding-top: 50px;
} 

li {    
    font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
    display: inline;
    margin: 10px;
    padding: 30px;
    font-size: 12px;    
    font-family: globerthin, Verdana, Arial, Geneva, sans-serif;    
}

.menu1 a:link{
    color: green;
    text-decoration: none;
    margin-top: 20px;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover{
    background-color: #faf6eb;
    text-decoration: none;
}
a:active{
    color: black;
    text-decoration: underline;
    background-color: #faf6eb;
}

In menu two it looks like this:

.menu2 ul {
    list-style-type: none;
    padding-top: 30px;
} 

li {    
    font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
    display: inline;
    margin: 10px;
    padding: 30px;
    font-size: 12px;    
    font-family: globerthin, Verdana, Arial, Geneva, sans-serif;    
}

#menu a:link{
    color: green;
    text-decoration: none;
    margin-top: 20px;
}

a:visited {
    color: black;
    text-decoration: none;
}

a:hover{
    background-color: #faf6eb;
    text-decoration: none;
}

a:active{
    color: black;
    text-decoration: underline;
    background-color: #faf6eb;
}