Navigation at footer - css

Question

I'm designing a website for a non-profit and I'm having issues creating a navigation in the footer exactly like the one seen here.
I've accomplished the top part but the bottom part that looks like ULs next to each other is giving me trouble! I've been playing with the html/css for hours but nothing came close to this look so asking here is my last resort. I will post the current code.
**Not saying i'm a pro but I am not new to HTML/CSS as I created my entire website from scratch w/HTML & CSS.
Thanks in advance for your help!
HTML:
<div id="footer2" class="bottomleft bottomright">
<ul>
<li>ABOUT</li>
<li>
Our Mission and Vision
</li>
<li>
Our People
</li>
<li>
Our Outreach and Programs
</li>
<li>
Our Community Partners
</li>
</ul>
<ul>
<li>
ABOUT
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>ABOUT</li>
<li>
Our Mission and Vision
</li>
<li>
Our People
</li>
<li>
Our Outreach and Programs
</li>
<li>
Our Community Partners
</li>
</ul>
<ul>
<li>ABOUT</li>
<li>
Our Mission and Vision
</li>
<li>
Our People
</li>
<li>
Our Outreach and Programs
</li>
<li>
Our Community Partners
</li>
</ul>
</div>
<!--end footer2-->
<div id="footer3">
<br />Copyright © 2014 All rights reserved.
<br />
<br />RSCF is a nonprofit organization whose mission is to "empower an educational revolution throughout the South Los Angeles community and beyond..."
<br />
<br />
</div>
<!--end footer3-->
</div>
<!--end container-->
CSS
#footer2 {
background-color: #609;
width: 980px;
height: 200px;
clear: both;
display: block;
text-align: center;
color: #FFF;
font-size: small;
padding-top: 10px;
}
#footer2 ul {
text-align: left;
height: auto;
margin: 0px;
}
#footer2 ul li {
display:inline-table;
padding: 5px;
}
#footer2 ul li a {
text-decoration: none;
color: #FFF;
padding: 0px 8px 8px 8px;
}
#footer2 ul li a:hover {
text-decoration: underline;
font-weight:900;
}

Answer 1

The first thing that i did was remove the display: inline, i've replaced it with list-style none to reach the same visual effect like the site which you referred. Well, after that i've change all the ul's to float left, so each one will be rendered as you needed.
The new css:
#footer2 {
background-color: #609;
width: 980px;
height: 200px;
clear: both;
display: block;
text-align: center;
color: #FFF;
font-size: small;
padding-top: 10px;
}
#footer2 ul {
text-align: left;
height: auto;
margin: 0px;
float: left;
}
#footer2 ul li {
list-style: none;
padding: 5px;
}
#footer2 ul li a {
text-decoration: none;
color: #FFF;
padding: 0px 8px 8px 8px;
}
#footer2 ul li a:hover {
text-decoration: underline;
font-weight:900;
}
I created a fiddle to help you figure out the result: http://jsfiddle.net/5ms8up9w/

Answer 2

This is a little closer. I added a few divs and turned your id's into classes.
HTML
<div id="footer">
<div class="footer2 bottomleft bottomright">
<ul>
<li>ABOUT</li>
<li>Our Mission and Vision
</li>
<li>Our People
</li>
<li>Our Outreach and Programs
</li>
<li>Our Community Partners
</li>
</ul>
</div>
<div class="footer2">
<ul>
<li>ABOUT</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="footer2">
<ul>
<li>ABOUT</li>
<li>Our Mission and Vision
</li>
<li>Our People
</li>
<li>Our Outreach and Programs
</li>
<li>Our Community Partners
</li>
</ul>
</div>
<div class="footer2">
<ul>
<li>ABOUT</li>
<li>Our Mission and Vision
</li>
<li>Our People
</li>
<li>Our Outreach and Programs
</li>
<li>Our Community Partners
</li>
</ul>
</div>
<!--end footer2-->
<div id="footer3">
<br />Copyright © 2014 All rights reserved.
<br />
<br />RSCF is a nonprofit organization whose mission is to "empower an educational revolution throughout the South Los Angeles community and beyond..."
<br />
<br />
</div>
<!--end footer3-->
</div>
<!--end container-->
CSS
#footer{width:100%;background-color:red;}
.footer2 {
background-color: #609;
width: 25%;
height: 200px;
float:left;
text-align: center;
color: #FFF;
font-size: small;
padding-top: 10px;
}
.footer2 ul {
text-align: left;
height: auto;
margin: 0px;
}
.footer2 ul li {
list-style:none;
padding: 5px;
}
.footer2 ul li a {
text-decoration: none;
color: #FFF;
padding: 0px 8px 8px 8px;
}
.footer2 ul li a:hover {
text-decoration: underline;
font-weight:900;
}
Fiddle: http://jsfiddle.net/383vdv3z/