以導航鏈接框爲中心的箭頭懸停效果

Question

我有一個網站，我在Wordpress中建立了一個鏈接，當你將鼠標懸停在他們上面時，它們變成藍色，並且箭頭從框中下降。我的問題是，如果導航鏈接更長或更短，則導航框無法居中放置。我能夠用純CSS實現效果。這是我的代碼。

HTML

<div id="nav"> 

      <div class="navwrapper"> 
        <div class="main-nav"> 
         <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?> 
        </div> 
        <div class="clearfix"></div> 
      </div> 
     </div> 

CSS

.main-nav ul a{ 
    color: #0f0f0f; 
    text-decoration: none; 
} 


.main-nav ul li a{ 
    color: #0f0f0f; 
    text-decoration: none; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background-color: #efefef; 
    padding: 10px; 
} 


.main-nav ul a:hover{ 
    color: #fff; 
    text-decoration: none; 
    background-color: #5dbbe0; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    position: relative; 
} 


.main-nav ul li { 
    float: left; 
    margin: 25px 0 0 15px; 
} 


.main-nav ul a:hover:after{ 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: 18px; 
    top: 36px; 
    text-align: center; 
    border-width:10px 10px 0; 
    border-style: solid; 
    border-color: #5dbbe0 transparent; 
    display: block; 
} 

Answer 1

的一個問題與您當前使用的三角形的是，你的嵌套塊元素內內聯元素這是無效的CSS。 （可以嵌套塊元素中的內聯元素）

由於我們必須使用顯示：塊;爲了形成CSS3三角形，還可以將display：block添加到父元素。

我也改變了的三角形的位置到位置：相對於因爲想它相對於錨固元件

最後使用餘量到位置：0汽車;水平對齊三角形。我假設你正在使用的每個錨相同的高度，因爲這是你的導航，所以使用相應的底部終於調整三角形的垂直位置：例如-20px

觀看演示在這裏：http://jsfiddle.net/radialglo/Am48P/7/

我改變了你的：懸停：後一個：後僅用於演示目的。

 

    .main-nav ul a{ 
     color: #0f0f0f; 
     text-decoration: none; 
    } 


    .main-nav ul li a{ 
     color: #0f0f0f; 
     text-decoration: none; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 
     background-color: #efefef; 
     padding: 10px; 
     display: block; 
    } 


    .main-nav ul a:hover{ 
     color: #fff; 
     text-decoration: none; 
     background-color: #5dbbe0; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 
     position: relative; 
    } 


    .main-nav ul li { 
     float: left; 
     margin: 25px 0 0 15px; 
     list-style: none; 
    } 


    .main-nav ul a:after { 
     content: ' '; 
     /* position: absolute; */ 
     position: relative; 
     bottom: -20px; 
     /*adjust vertical height as necessary */ 
     width: 0; 
     height: 0; 
     /* left: 18px;*/ 
     /*top: 36px;*/ 
     text-align: center; 
     border-width:10px 10px 0; 
     border-style: solid; 
     border-color: #5dbbe0 transparent; 
     margin: 0 auto; 
     display: block; 
    }​