html - 使用边框创建的三 Angular 形在 Firefox 30.0 中看起来很奇怪

Question

我为我的网站创建了一个菜单。将鼠标悬停在每一个上时，一个使用边框创建的三 Angular 形将出现在文本上方。然而使用 Firefox 30.0，那个三 Angular 形看起来有点破烂。我不知道问题出在哪里，所以我来找你们寻求帮助。

这是 HTML:

<nav class="nav" role="navigation" id="ilt-main-nav">
    <ul id="main" class="menu">
        <li id="main-home" title="Go to Home Page" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">    <a href="#">Homepage</a>    
            <div class="nav-triangle"></div>
        </li>
        <li id="main-learn" title="Learn" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';"> <a href="#" title="Learn">Learn</a>

            <div class="nav-triangle"></div>
        </li>
        <li id="main-find" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">    <a href="#" title="Find">Find</a>   
            <div class="nav-triangle"></div>
        </li>
        <li id="main-help" title="Help" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">   <a href="#" title="Help">Help</a>   
            <div class="nav-triangle"></div>
        </li>
        <li id="main-search" title="Search" class="menu-item" onmouseout="document.body.style.cursor='default';" onmouseover="document.body.style.cursor='pointer';">   <a href="#" title="Search">Search</a>   
            <div class="nav-triangle"></div>
        </li>
    </ul>
</nav>

这是 CSS:

#main {
    position: relative;
    margin: auto;
    padding: 0;
    width: 100%;
}
#main a {
    color: #ACA2A2;
    display: inline-block;
    padding-top: 15px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    width: 100%;
}
#main a:hover {
    color: #4CC3F1;
}
#main-find a {
    border-top: 8px solid #F68E55;
}
#main-find div {
    display: none;
    border-top: 8px solid #F68E55;
}
#main-find a:hover + div {
    display: block;
}
#main-help a {
    border-top: 8px solid #F26955;
}
#main-help div {
    display: none;
    border-top: 8px solid #F26955;
}
#main-help a:hover + div {
    display: block;
}
#main-search a {
    border-top: 8px solid #b66763;
}
#main-search div {
    display: none;
    border-top: 8px solid #b66763;
}
#main-search a:hover + div {
    display: block;
}
#main-home a {
    border-top: 8px solid #3CAE8B;
}
#main-home div {
    display: none;
    border-top: 8px solid #3CAE8B;
}
#main-home a:hover + div {
    display: block;
}
#main-learn a {
    border-top: 8px solid #C0DC8F;
}
#main-learn div {
    display: none;
    border-top: 8px solid #C0DC8F;
}
#main-learn a:hover + div {
    display: block;
}
#main-players a {
    border-top: 8px solid #68C187;
}
#main-players div {
    display: none;
    border-top: 8px solid #68C187;
}
#main-players a:hover + div {
    display: block;
}
#main-home:hover, #main-find:hover, #main-players:hover, #main-help:hover, #main-learn:hover {
    padding:0px;
}
#main li {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    float: left;
    height: 60px;
    list-style-type: none;
    padding-bottom: 0px;
    text-align: center;
    width: 20%;
}
#main a {
    background: transparent;
}
#main .ilt-player-menu-current {
    width:0px;
    display:none;
}
.nav-triangle {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    margin: 0 auto;
    padding-top: -40px;
    position: relative;
    top: -40px;
    width: 0;
}
.nav {
    z-index: 0;
    height:80px;
}
.nav ul {
    border:0px;
}
.nav li {
    padding: 0px;
}
.nav {
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    z-index: 15;
}
.nav ul {
    background-color: #3dae8a;
    text-align: center;
    position: absolute;
    width:100%;
    z-index: 16;
}
.nav li {
    text-align: center;
    width:100%;
    list-style-type: none;
}
.nav .ilt-player-menu-current {
    display: block;
    text-align: center;
    width:100%;
}
.nav a {
    text-align: center;
    display: block;
    width:100%;
}

我还在 JSFiddle 上设置了它:http://jsfiddle.net/3z3wD/在 JSFiddle 上，虽然很难看到三 Angular 形。我知道这是一个 css 问题，但我不知道如何解决。

Answer 1

将 li 设置为 position:relative 并将三 Angular 形设置为 absolute 会更容易: DEMO

.nav-triangle {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    margin: 0 auto;
    position: absolute;/* nail it where you want ! with coordonate and eventually margins , parent is in relative*/
    top:8px;/*width of colored top border */
    left:50%;
    margin-left:-10px;
    z-index:1;
    width: 0;
}

.nav li {
    text-align: center;
    width:100%;
    list-style-type: none;
    position:relative;/* for absolute child */
}