UL Classes

[6StringGeek]

Maybe someone could help here. I have two menu's: one in the header and one in the footer...pretty standard fare. I want to make them both unordered lists, but have different colors, sizes, margins etc...so I am assuming I need to assign classes...but not sure how. Here's what I have for the top menu. Can I do the same thing for the footer menu using a class, and how would I do that? I have been using <p> for the footer menu, but think it should be a <ul> since it's not really a paragraph...any help appreciated.

<div class="menu">
<ul>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 1</a></li>
</ul>
</div>


ul {
list-style-type:none;
}

li {
display:inline;
}

.menu a {
float:left;
text-align:center;
width:130px;
text-decoration:none;
color:#fff;
font-size:12px;
font-weight:700;
background:transparent;
padding:3px 0;
}

.menu a:hover {
color:#ff0;
background:transparent;
}

[6StringGeek]

I got this to work, but am i over complicating things? Is there a more compact or correct way to do this?

### THIS IS THE HEADER MENU ###
<div class="menu">
<ul class="topnav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>

### AND THE CSS ###
.menu {
margin:0 auto;
margin-top:32px;
}
ul.topnav
{
margin: 0;
padding: 0;
}
.topnav li
{
list-style-type: none;
display: inline;
}
.topnav li a
{
float:left;
text-align:center;
width:130px;
text-decoration:none;
color:#fff;
font-size:12px;
font-weight:700;
background:transparent;
padding:3px 0;
}
.topnav li a:hover { color: yellow; }

### THIS IS THE FOOTER MENU ###

<div class="footermenu">
<ul class="bottomnav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQS</a></li>
</ul>
</div>

### AND THE CSS ###
.footermenu {
margin:0 auto;
padding-top:14px;
}

ul.bottomnav
{
margin: 0;
padding: 0;
}

.bottomnav li
{
list-style-type: none;
display: inline;
}

.bottomnav li a
{
float:center;
text-align:center;
text-decoration:none;
color:#fff;
font-size:10px;
font-weight:700;
background:transparent;
padding-right:15px;
}

.bottomnav li a:hover { color: #000; }

[Fang]

No need for the <div>

[6StringGeek]

i put it in because i coudn't center the menu on my screen...i know i must be doing something wrong! Thanks for letting me know...I'll work on it some more.