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小提琴： http://jsfiddle.net/Broli/yemze0je/1/

Answer 1

首先，评论对你有好处！ :-)

我立即想到你的HTML是你应该将每个锚包装在它自己的列表项中。

更改此标记，标记可能会按照您希望的方式运行。

http://www.w3schools.com/html/html_lists.asp

或者，如果您想保留相同的标记，可以通过使用CSS设置光标来掩盖问题，如下所示;

ul，li {cursor：default;}

我认为li或ul需要光标集（我在我的智能手机上！）

Answer 2

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

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 */
}

因为你的字体是在孩子们中指定的，所以就是这样。

菜单项之间的空格就像隐藏文本一样

2 个答案: