Навигация в нижнем колонтитуле

Question

Я создаю веб-сайт для некоммерческих организаций, и у меня возникают проблемы с созданием навигации в нижнем колонтитуле, точно такой же, как здесь.

Я выполнил верхнюю часть, но нижняя часть, которая выглядит как UL рядом друг с другом, доставляет мне неприятности! Я часами играл с html/css, но ничто не приблизилось к этому взгляду, поэтому спрашиваю, вот мое последнее средство. Я выложу текущий код. ** Не говорю, что я профессионал, но я не новичок в HTML/CSS, так как я создал весь свой сайт с нуля с HTML и CSS.

Заранее спасибо за помощь!

HTML:

<div id="footer2" class="bottomleft bottomright">
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="">ABOUT</a>
        </li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </li>
    </ul>
    <ul>
        <li>ABOUT</li>
        <li>
            <a href="">Our Mission and Vision</a>
        </li>
        <li>
            <a href="#">Our People</a>
        </li>
        <li>
            <a href="#">Our Outreach and Programs</a>
        </li>
        <li>
            <a href="#">Our Community Partners</a>
        </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

Это немного ближе. Я добавил несколько делений и превратил ваши идентификаторы в классы.

HTML

    <div id="footer">

<div class="footer2 bottomleft bottomright">
    <ul>
        <li>ABOUT</li>
        <li><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </li>
    </ul>
    </div>
    <div class="footer2">
    <ul>
        <li><a href="">ABOUT</a></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><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </li>
    </ul>
    </div>
    <div class="footer2">
    <ul>
        <li>ABOUT</li>
        <li><a href="">Our Mission and Vision</a>
        </li>
        <li><a href="#">Our People</a>
        </li>
        <li><a href="#">Our Outreach and Programs</a>
        </li>
        <li><a href="#">Our Community Partners</a>
        </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;
}

Скрипка: http://jsfiddle.net/383vdv3z/

Answer 2

Первым делом я удалил дисплей: встроенный, я заменил его на стиль списка, чтобы получить тот же визуальный эффект, что и на сайте, на который вы ссылались. Что ж, после этого я изменил все ul, чтобы они плавали влево, поэтому каждый будет отображаться так, как вам нужно.

Новый 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;
}

Я создал скрипку, чтобы помочь вам выяснить результат: http://jsfiddle.net/5ms8up9w/