html - 在垂直导航顶部添加箭头

Question

基本上，我试图在我的下拉菜单顶部得到一个箭头，就像这样 http://dribbble.com/shots/678124-Notification-Dropdown?list=users

问题是，当我将它添加到我的页面时，我没有看到箭头。我相信它在列表的后面，但我只是对如何做到这一点感到困惑。

我的 list 是这个

<ul>
        <img src=\"images/icons/listarrow.png\">
        <li><a href=\"viewuser.php?uid=$liveuserid\"><img src=\"images/profilepics/$profilepic\">Your profile</a></li>
        <li><a href=\"settings.php?personal=all\">pic Settings</a></li>
        <li><a href=\"settings.php?addproject=all\">pic Add Project</a></li>
        <li><a href=\"settings.php?mail=all\">pic Mail</a></li>
    <li><a href=\"logout.php\">Logout pic</a></li>
 </ul></li></ul>"

来自 PHP 代码，所以这就是我使用转义斜杠的原因。我用于列表的 CSS

#usernav ul ul {

background: #ecebe8; 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 37px;
margin-left: 12px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-box-shadow: 0px 1px 4px #000;
-webkit-box-shadow: 0px 1px 4px #000;
box-shadow: 0px 1px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}


#usernav ul ul li {

padding: 0px;
float: none; 
position: relative;;
border: 0px;
background-color: white;
min-width: 0px;
width: 135px;

}

我确信路径是正确的，也许我添加图像的 html 代码只是愚蠢，我不知道。谢谢!

Answer 1

你可以用 before 伪元素来做到这一点。

ul:before {
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: "";
height: 0;
position: absolute;
right: 0;
top: -10px;
width: 0;
}

这将创建一个出现在 UL 顶部的箭头。请务必将相对定位应用于适当的父元素。