How to create multiple menus on the same page with xhtml

Question

I can’t put on the same page, for example two menus.

Let me explain. I use the unordered lists and the inline display to create a horizontal menu.

I do the same to further down the page create another.

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

Well, the goal is to have the ability to use independent formatting. I’m not getting.

I’ve looked at a lot of sites and books and can’t find anything. Can anyone help me? I’m taking my first steps in practice. Thank you.

Below you have an example. I did not put everything right as for example the etc is only 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 css it’s 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;
}

Menu two is 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;
}