css - 菜单项之间的空格就像不可见的文本

Question

几周前，我的教会要求我为他们创建一个新网站，我很高兴地答应了。我已经在 PS 中创建了模型，现在正在编写代码。我创建了导航栏，它按照我的预期正常工作。

但是，我遇到了一个与菜单项之间的空格有关的明显问题。看起来这可能是一个简单的修复，但我似乎无法弄清楚。菜单栏设置为无序列表和有序列表。我让它们均匀分布，但在空白区域之间，鼠标光标从指针变为“I”条，就好像有不可见的文本。

对我来说，这并不理想，我更希望将鼠标悬停在菜单项之间的这个空白区域时，它会保留为光标指针而不是这个“I”栏。此外，如果您突出显示整个菜单，空格也会突出显示并与菜单项相关联。这对我来说也不理想，这让我感到困惑，为什么空白区域有点像隐形文本。

这是我的菜单栏 CSS 代码:

<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>

这是我的 HTML 代码(忽略评论，我使用它们是为了在休息时不会迷路):

<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>

希望这是一个有效的 JS Fiddle: http://jsfiddle.net/Broli/yemze0je/1/

Answer 1

内联 block 根据默认分配字体大小，您想要的是链接上的手形图标，以及不是链接时的箭头:

演示: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 */
}

因为您的字体大小是在 child 中指定的，所以这就是这样做的。