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 21
Russ SuterAsked:
Who is Participating?
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.
0
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&
0
Russ SuterAuthor Commented:
I'm still no closer to solving this issue. The advice given so far doesn't seem to address my question. Anything else?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Russ SuterAuthor 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.
0
SSupremeCommented:
Tell me where did you get this screenshot and I will make same popup for you.
0
Russ SuterAuthor Commented:
0
SSupremeCommented:
As I said in my first comment, it is javascript based solution. Give me some time.
0
SSupremeCommented:
0

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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.