Having trouble getting a standalone popup menu to work

I need a menu that I can just drop in anywhere on my page. I created a simple popup but it's not quite right.

Here's the HTML

                <ul class="popupmenu" style="right: 4px; top: 4px;">
                    <li class="popupmenu-anchor">
                        <a href="#"><i class="fa fa-download"></i>&nbsp;Download&nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
                        <ul class="popupmenu-sub">
                            <li><i class="fa fa-file-text-o"></i>to CSV</li>
                            <li><i class="fa fa-file-excel-o"></i>to Excel File</li>
                        </ul>
                    </li>
                </ul>

Select allOpen in new window

and the CSS

ul.popupmenu
{
    color: #888888;
    position: absolute;
    border: 1px solid #CCCCCC;
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style-type: none;
    text-decoration: none;
    background-color: inherit;
}

    ul.popupmenu:hover
    {
        background-color: #ededed;
    }

    ul.popupmenu li
    {
        margin: 2px 2px 0 2px;
        display: inline-block;
        float: left;
        position: relative;
    }

        ul.popupmenu li a
        {
            display: block;
            text-decoration: none;
            color: #888888;
        }

        ul.popupmenu li ul
        {
            display: none;
            position: absolute;
            background-color: white;
            padding: 0;
            padding-top: 5px;
            border: 1px solid #CCCCCC;
            width: auto;
        }

        ul.popupmenu li:hover ul, ul.popupmenu-sub:hover
        {
            display: block;
        }

        ul.popupmenu li ul li
        {
            display: block;
            width: auto;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        ul.popupmenu li ul li:hover
        {
            background-color: #ededed;
        }

Select allOpen in new window

And this is what I get:

I have a couple of issues:

1. I need to be able to adjust the width, relative dropdown position, and offset from the menu. I'd like something that looks more like this:

As you can see, the popup menu is slightly offset from the anchor element (vertical space), it drops down right-justified, and has a flexible width. I can't get mine to do any of those things.

2. I need it to be also activated by a click so a touch device (such as a tablet) can activate the dropdown by tapping on the anchor element.

I'm still learning CSS tricks. Help?