html - 在二级菜单顶部添加一个向上箭头？

Question

我创建了一个简单.arrow-up的 CSS 类：

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

我希望这个箭头正好出现在二级菜单的顶部，这是我的菜单代码：

HTML：

<header>
    <div class="welcome_area">
        <p>
            Welcome, <b><a href="profile.php">Arkam Gadet</a> </b>

        </p>
    </div>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="profile.php">My Profile</a>
                    <ul>

                        <li><a href="#">My Questions</a>
                        </li>
                        <li><a href="#">Settings</a>
                        </li>
                    </ul>
                </li>
                <li><a href="inbox.php">Inbox</a>
                </li>
                <li><a href="#">Notifications</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS：

header {
    background-color: #eee;
    height: 45px;
    box-shadow: 0px 2px 3px 1px #bbb;
}
a {
    color: black;
    text-decoration: none;
}
h2 {
    color: #f79a1d;
}
.welcome_area {
    float: left;
    margin-left: 5%;
}
.menu {
    float: right;
    margin-right: 5%;
}
.menu nav > ul {
    position: relative;
    padding:0px;
}
.menu nav ul li {
    display: inline;
    padding: 5px;
}
.menu nav ul li a {
    padding: 2px;
}
.menu nav ul li a:hover {
    background: #eee;
    border: 0;
    border-radius: 3px;
    box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
    position: absolute;
    left: -30px;
    top: 40px;
    padding:0px;
    width: 150px;
    border-radius: 3px;
    display: none;
    background-color: #eee;
    box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
    display: block;
}

演示。

我试图将它添加为列表的 li，但随后它进入了它而不是它的顶部。

如何将.arrow-up二级菜单置于顶部？

Answer 1

沿着这些路线怎么样：

.menu nav ul ul:before {
    width:0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display:block;
    clear:both;
    position:absolute;
    top:-5px;

    border-bottom: 5px solid black;
    content:'' ;
}