實現此導航效果的最有效方法？

Question

我想盡可能實現this鼠標懸停效果。我無法顯示箭頭（.png），它會被高度截斷，我不確定如何顯示高度。到目前爲止，我嘗試了幾種失敗的方法，希望有人能幫助我。

我所做的是爲箱子設計錨點，並嘗試在箱子下面放置小箭頭。箭頭不顯示在錨點框內，它被切斷。我嘗試將箭頭作爲LI的一部分，但它的工作原理是錨點需要爲30px（藍色框的高度），LI需要爲40px（框+箭頭10px的高度），它將顯示箭頭如果您將鼠標懸停在10px區域而不是框中。

目前它looks like this。

這裏是我的CSS：

#navlist { 
float:right; 
} 
#navlist li { 
line-height:40px; 
display:inline; 
list-style-type: none; 
margin-right: 20px; 
} 
#navlist li:hover { 
background:url(../img/navArrow.png) no-repeat center; 
background-position:50% 30px; 
} 
#navlist li a { 
height:30px; 
padding:3px 5px 3px 5px; 
color:#26627f; 

} 
#navlist li a:hover { 
background:#035173; 
border-radius:3px; 
color:#fff; 
} 

這裏是HTML：

<ul id="navlist"> 
    <li><a href="#">Get a Quote</a></li> 
    <li><a href="#">Learn about Life Insurance</a></li> 
    <li><a href="#">Our Company</a></li> 
    <li><a href="#">Get Help</a></li> 
</ul> 

Answer 1

你可以簡單地添加以下到你的CSS：

#navlist li:hover a::after, 
#navlist li a:hover::after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin: 0 0 0 -1em; 
    border: 1em solid transparent; 
    border-top-color: #035173; 
}​ 

JS Fiddle demo。

這當然要求用戶有一個實現CSS生成內容和僞元素的瀏覽器。

---

編輯響應從OP評論，在下面的評論：

不能確定你是如何得到的形狀出來的是，你能解釋？有用。有什麼方法可以使箭頭變小，並且可以採用箱狀陰影效果嗎？

它的工作原理，因爲元件相遇的在45℃的邊界，並且因爲有用於產生一個三角形形狀「指向」朝向所述元件的中心（或者，在此情況下，元件沒有height/width，僞元素）。如果所有四個邊界都可見，則會有一個正方形;如果頂部和底部可見，則會出現三角形「沙漏」，等等。

爲了使三角形小，只需一個較小的單位分配給邊界寬度（在上面的例子中的邊界被設置爲1em，只需將其改變爲5px或，那麼，測量的該任何其它的尺寸和單元瀏覽器可以實現。

負保證金左（在margin聲明-1em）必須以僞元件居中放置沿水平軸等於border-width，但它可以被調整以味道。

添加一個box-shadow是困難的，因爲所有四個邊界都有e被分配以創建三角形，box-shadow將是整個元素的矩形，而不僅僅是「可見」部分。可以仿效，如果你可以使用另一個僞元素（在這種情況下爲::before），但它不具有真正的box-shadow的通常「模糊性」，但作爲演示，只需複製上面的CSS ，將::after修改爲::before（並確保::before元素出現之前::after的聲明，因爲後面聲明的元素將高於先前聲明的元素）。調整頁邊距和性質，它應該看行不行肥胖型：

#navlist li:hover a::before, 
#navlist li a:hover::before { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin: 0 0 0 -0.7em; 
    border: 1em solid transparent; 
    border-top-color: #ccc; 
} 

#navlist li:hover a::after, 
#navlist li a:hover::after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin: 0 0 0 -1em; 
    border: 1em solid transparent; 
    border-top-color: #035173; 
}​ 

JS Fiddle demo。