Unable to make div arrow pointing to menu at the top right

Question

I want to mark my div content with arrow pointing to the specific menu's button. I have a menu on the top right, I want to point its div content with arrows. I created a Fiddle. How can I show my arrow on the top right?

HTML

<p></p>
<span id="pointer"></div>

CSS

body {
    background:#ff004e;
    padding:40px
}
p {
    background:white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:250px;
    height:150px
}
span#pointer {
    border:solid 10px transparent;
    border-right-color:#fff;
    position:absolute;
    margin:0px 0 0 -20px;
}

Answer 1

Something like this? http://jsfiddle.net/Zaukt/1165/

HTML:

<div class="container">

    <div id="pointer"></div>
</div>

CSS:

body {background:#ff004e;padding:40px}

.container {
    background:white; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    width:250px; 
    height:150px;
    display: block;
    position: relative;
}

#pointer{
    border-bottom:solid 10px #FFF;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    position:absolute;
    width: 0;
    height: 0;
    top: -10px;
    right: 20px;
}