Как сделать так, чтобы url был под списком backimage в HTML unorderedlist?

---

Здравствуйте, друзья:

Я разрабатываю навигационную панель с помощью списка, и я установил определенное фоновое изображение для тега li, и я написал тег внутри тега li, как показано ниже.

Проблема в том, что текст в теге показывается над изображением в li, я хочу, чтобы он был показан под изображением, как я могу это сделать?

Что я уже пробовал:

<li style="background: ('images/nav-bar/home.png') no-repeat center 0px;">
                                                    <a href="index.php">
                                                        Home
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/products.png') no-repeat center 0px">
                                                    <a href="services.php">
                                                        Services
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/downloads.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        Downloads
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/about.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        About Us
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/faqs.png') no-repeat center 0px">
                                                    <a href="index.php">
                                                        Faqs
                                                    </a>
                                                </li>

                                                <li style="background: ('images/nav-bar/contact.png') no-repeat center 0px">
                                                    <a href="contact.php">
                                                        Contact Us
                                                    </a>
                                                </li>

а это и есть css:

ul#nav{
    direction:rtl;
    float:left;
}
ul#nav li{
    display:inline-block;
    height:85px;
}

ul#nav li a:hover{
    color:orange;
    text-align:center;
}

ul#nav li a{
    vertical-align:basline;
    font-size:18px;
    font-weight:bold;
    display:block;
}

---