I have created this drop down menu. And I am having same dropdown with same "id" & "class" names, several times. In this case in my demo I have shown 2 same of.

Now when I click the "more actions" (bottom dropdown), the dropdown appears in the top drop down.

What is the correct method to solve this (I need to have same id & class names for all dropdowns).

Here is the link Click Here

Member Avatar for LastMitch

Now when I click the "more actions" (bottom dropdown), the dropdown appears in the top drop down.

@trishfernan

I am having cautious of clicking links. The reason is that I don't like to get any virus. I only click links if the Daniweb member been on for a long time and trust worthy. Then I will click and help.

Please post your code.

@lastmitch

JSFiddle is usually pretty safe in my experience, and I use it a lot as well :)

@trishfernan

You have a couple of problems, but the main one is that you are using ID when you should be using a class. jQuery is picking up the first ID with #dd in the dom. If you use the class .wrapper-dropdown-2 it will trigger off that particular element that you clicked on rather.

The other problem you have is, you're just changing the opacity on the drop down menu. Changing the opacity of the drop down to 0 removes it from the view, but it is still there and can be clicked on. You should set the display on it to none or hide it with jQuery.

http://jsfiddle.net/pixelsoul/RtqCL/3/

Member Avatar for LastMitch

JSFiddle is usually pretty safe in my experience, and I use it a lot as well :)

@pixelsoul

I don't know. I'm still cautious. =)

It's like if you click a link on AOL chat and all of sudden your computer crash.

The power of javascript (the bad side).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.