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>

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

Open in new window


And this is what I get:
popupmenu
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:
good popup
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?
LVL 22
Russ SuterSenior Software DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SSupremeCommented:
I would suggest you to use JS for hover, if you will have arrow next to "download" it will be noticeable as "click me to get something". After that you can skip "mouse motion thing" from primal ul to second ul and style dropbox as you wish.
COBOLdinosaurCommented:
If you want it to be dynamically adjustable, you need to scriptt the dynamic changes either by declaring additional style with the alternate styling so you can swap the className, or you could directly modify the properties of the style objects at the element level.  The first method is favored because it is more efficient and makes the changes without imposing locked properties.

Cd&
Russ SuterSenior Software DeveloperAuthor Commented:
I'm still no closer to solving this issue. The advice given so far doesn't seem to address my question. Anything else?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Russ SuterSenior Software DeveloperAuthor Commented:
I've requested that this question be deleted for the following reason:

No solution has been provided and the question seems to be cold - no more input despite my request for additional info.
SSupremeCommented:
Tell me where did you get this screenshot and I will make same popup for you.
Russ SuterSenior Software DeveloperAuthor Commented:
SSupremeCommented:
As I said in my first comment, it is javascript based solution. Give me some time.
SSupremeCommented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.