Spaces between Menu items acting like invisible text

A few weeks ago I was asked by my church to create a new website for them which I happily obliged to. I've already created a mockup in PS and I'm coding it right now. I created the navigation bar and it is working properly as I had intended.

However I'm running into a glaring problem concerning the spaces in between the menu items. It seems like it may be an easy fix, but I cannot seem to figure it out. The menu bar is set up as unordered and ordered lists. I have them evenly spread out, but in between the empty spaces, the mouse cursor changes from a pointer into an "I" bar, as if there is invisible text.

For me, this is not ideal, and I'd much prefer that when hovering over this empty space between the menu items that it would stay as a pointer for the cursor instead of this "I" bar. Also, if you highlight the entire menue, the spaces also highlight as well and connect with the menu items. That is also not ideal for me, and it makes me confused why the empty spaces are sort of acting like invisible text.

Here is my menu bar CSS code:

<style type="text/css">

nav {
position: relative;
width:960px;
z-index:9999;
margin-left:auto;
margin-right:auto;
padding:0;
background-color:transparent;
text-align:justify;
}

#bar1 {
background-color:transparent;
padding:0;
text-align: justify;
overflow: hidden;
height:39px;
border-top: 1px solid #222222; border-bottom: 1px solid #90908e;
background-color:transparent;
}

#bar1>li {
display:inline-block;
margin-top:8px;
height:100%;
background-color:transparent;


}

#bar1>li>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#464748;
text-decoration:none;
}

#bar1>li>a:hover,#bar1>li>a:active,#bar1>li:hover>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
 font-size:15px;
color:#2b77a0;
text-decoration:none;   
}

#bar1>li>ul>li {
border-top: none;
height:33px;
margin-top:8px;
left: 0;
position: absolute;
width: 100%;
text-decoration:none;
background-color:transparent;
padding-top:7px;
}

#bar1>li:hover>ul>li{
display:block;
}
#bar1>li>ul>li{
display:none;
text-decoration:none;
}

#bar1>li>ul>li>a
{
font-family:'Antenna Thin', Arial, Helvetica, sans-serif;
font-size:15px;
color:#222222;
text-decoration:none;
}

#bar1>li>ul>li>a:hover, #bar1>li>ul>li>a:active, #bar1>li>ul>li:hover>a,
{
font-family:'Antenna Thin', Arial, Helvetica, sans-serif;
color:#222222;
}

li {
list-style-type:none;
}

.filler 
{
width:100%;
display: inline-block;
height:0px;
cursor:pointer;
}
</style>

And here is my HTML coding (Ignore the comments, I use them so I don't get lost when I take breaks):

<nav>
<ul id="bar1">

    <!--Begin About Us-->
    <li><a href="#">ABOUT US</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> New to Nederland First Assembly</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our History</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Our Beliefs</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End About Us-->

            <!--Begin Ministries-->
    <li><a href="#">MINISTRIES</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Kids</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Youth</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Women</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Men</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Ministries-->

                    <!--Begin Events-->
    <li><a href="#">EVENTS</a>
        <!--Begin drop down menu items-->
        <ul>
            <li>
                <a href="#"><font color="#2b77a0">•</font> Latest News</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Monthly Calendar</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Events-->

                        <!--Begin Listen Online-->
    <li><a href="#">LISTEN ONLINE</a>
        <!--Begin drop down menu items-->
        <ul style="background-color:red;">
            <li>
                <a href="#"><font color="#2b77a0">•</font> Sermons</a>          
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Teachings</span></a>
                <a href="#"><span style="margin-left:10px;"><font color="#2b77a0">•</font> Archive</span></a>
            </li>

        </ul>
        <!--End drop down menu items-->
    </li>
    <!--End Listen Online-->
    <li><a href="pages/contact.html">CONTACT US</a></li>
    <li class="filler"></li>
</ul>

And here is hopefully a working JS Fiddle: http://jsfiddle.net/Broli/yemze0je/1/

Solution

Inline block assigns a font size based on the default, what you want is the hand icon on a link, and the arrow when it's not a link:

DEMO: http://jsfiddle.net/yemze0je/3/

nav {
    position: relative;
    width:960px;
    z-index:9999;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    background-color:transparent;
    text-align:justify;
    font-size:0px; /* due to inline-block on children */
}

Because your font size is specified in the children, this does just that.