Question

我为我的网站创建了一个菜单。在鼠标悬停在每个上方时，使用边框创建的三角形将显示在文本上方。然而，使用Firefox 30.0，这个三角形看起来有点粗糙。我不知道问题是什么，所以我来找你们帮忙。

这是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/ ON JSFiddle，虽然很难看到三角形。我知道这是一个CSS问题，但我不知道如何解决它。

Answer 1

将li设置为position：relative并将三角形设置为绝对值会更容易： 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 */
}

使用边框创建的三角形在firefox 30.0中看起来很奇怪

1 个答案: