I have a drop down menu button. On hover of the button I need to show the full border. But when pressed and as long as the menu is active/shown, the bottom border of the button should vanish and the menu that opens under the button should merge in such a way that it appears as a single component.
This is what I am trying to do for achieving the same.
I remove the bottom border of the button when the button is pressed and/or the menu is active/shown. That is all fine and easy to achieve. The thing which I am really not able to achieve is having the button above the menu (the menu always shows above the button) so that it appears as a single component.
The menu has a z-index of 19001 and I have tried putting higher z-index for the button, but could not get it working. Any kind of suggestion or help on this would be greatly appreciated.
After reading many blogs I came to know the way z-index/html layering works. I solved the problem by making menu as direct child of body and setting top and left on it. The problem was the way html layering works.Any one can get idea of html layering from link.