Bringing an up-arrow on the top of the second level menu? - html

Question

I have created a simple .arrow-up class of CSS:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I want this arrow to come on exact top of the second level menu, here is my menu code:
HTML:
<header>
<div class="welcome_area">
<p>
Welcome, <b>Arkam Gadet </b>
</p>
</div>
<div class="menu">
<nav>
<ul>
<li>My Profile
<ul>
<li>My Questions
</li>
<li>Settings
</li>
</ul>
</li>
<li>Inbox
</li>
<li>Notifications
</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.
I tried to add it as a li of the list but then it's coming inside it not on top of it.
How can I bring the .arrow-up on top of the second level menu?

Answer 1

What about something along these lines:
.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:'' ;
}