在第二級菜單的頂部添加向上箭頭？

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; 
} 

Demo.

我試圖將其添加爲列表中的一個裏，但隨後它的到來裏面不是在它的上面。

如何將.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:'' ; 
}