<div id=item>Text</div>

#item:before { content: ''; height: 0; position: absolute; top: -10px; width: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ccc; }

<ul>
    <li>
        <a>Menu</a>
        <ul>
            <li><a>sub</a>
            <li><a>menu</a>
        </ul>
    <li>
        <a>Menu</a>
        <ul>
            <li><a>sub</a>
            <li><a>menu</a>
        </ul>
</ul>

a { background: #aaa; display: block; padding: 10px; width: 100px; }
li { display: inline-block; position: relative; }
li ul { display: none; }
li ul:before { content: ''; height: 0; left: 10px; position: absolute; top: -10px; width: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ccc; }
li ul a { background: #ccc; }
li:hover ul { display: block; position: absolute; top: 40px; }
ul { margin: 0; padding: 0; }