Question

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

问题是，当我将它添加到我的页面时，我没有看到箭头。我相信它已经落后于名单，但我只是对如何做到这一点感到难过。

我的清单是这个

<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顶部的箭头。请务必将相对定位应用于适当的父元素。

Answer 2

你可以给img一个id，然后将高度和宽度设置为你想要的css中的id

这应该有用，如果没有尝试将img包装在<li></li>标签

中

在垂直导航顶部添加箭头

2 个答案: