JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu1"><div class="relative">
  <a href="/demos" title="Popular MooTools Tutorials" id="dd1" class="dropdown" style="width:170px;text-decoration:none;"><span>Menu 1</span></a>
  <div id="dropdown1" class="dropdown-menu">
    <a href="/about-david-walsh" title="Learn a bit about me.">About Me</a>
    <a href="/page/1" title="The David Walsh Blog">Blog</a>
    <a href="/chat" title="#davidwalshblog IRC Chat">Chat</a>
    <a href="/contact" title="Contact David Walsh">Contact Me</a>
    <a href="/demos" title="CSS, PHP, jQuery, MooTools Demos">Demos &amp; Downloads</a>
    <a href="/js" title="ScrollSpy, Lazyload, Overlay, Context Menu">MooTools Plugins</a>
    <a href="/network" title="David Walsh Blog, Script &amp; Style, Band Website Template, Wynq">Network</a>
    <a href="/web-development-tools" title="JS, CSS Compression">Web Dev Tools</a>
  </div>
</div></div>

<div id="menu2"><div class="relative">
  <a href="/demos" title="Popular MooTools Tutorials" id="dd2" class="dropdown" rel="dropdown2" style="width:170px;text-decoration:none;"><span>Menu 2</span></a>
  <div id="dropdown2" class="dropdown-menu">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
</div></div>

CSS

/* dropdowns: general */
a.dropdown { background: #88bbd4; padding: 4px 6px 6px; text-decoration: none; font-weight: bold; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
a.dropdown:hover { background: #59b; }
a.dropdown { position: relative; margin-left: 3px; }
a.dropdown span { background-image: url(toggle_down_light.png); background-repeat: no-repeat; background-position: 100% 50%; padding: 4px 16px 6px 0; }
a.dropdown.dropdown-active { color:#59b; background-color:#ddeef6; }
a.dropdown.dropdown-active span { background:url(toggle_up_dark.png) 100% 50% no-repeat; }
.dropdown-menu  { background:#ddeef6; padding:7px 12px; position:absolute; top:16px; right:0; display:none; z-index:5000; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
  .dropdown-menu p { font-size:11px; }
.dropdown-menu a:link, .dropdown-menu a:visited { font-weight:bold; color:#59b; text-decoration:none; line-height:1.7em; }
.dropdown-menu a:active, .dropdown-menu a:hover { color:#555; }

/* dropdowns: specific */
#menu1      { float:left; margin-right:20px; }
  #dropdown1  { width:150px; }
  #dropdown1 a  { display:block; }
#menu2      { float:left; }
  #dropdown2  { width:150px; font-size:11px; }
.relative   { position:relative; }

JavaScript

window.addEvent('domready',function() {
  (function($) {
    var activeClass = 'dropdown-active',
        dropdownClass = '.dropdown',
        dropdownMenuClass = '.dropdown-menu',
        dropdownElements = $$(dropdownClass),
    
        hideMenu = function(dd) {
            dd.removeClass(activeClass);
            dd.getNext(dropdownMenuClass).setStyle('display','none');
            dd.store('open',false);
        },
        
        hideAllMenu = function() {
            dropdownElements.each(function(dropdown) {
                hideMenu(dropdown);
            });
        },
   
        showMenu = function(dd) {
            dropdownElements.each(function(dropdown) {
                hideMenu(dropdown);
            });
            
            dd.addClass(activeClass);
            dd.getNext(dropdownMenuClass).setStyle('display','block');
            dd.store('open',true);
        };
    
    dropdownElements.each(function(dropdown) {
        dropdown.store('open',false)
        .addEvents({
            'click' : function(e) {
                if(e) e.stop();
                if(this.retrieve('open')) {
                    hideMenu(this);
                }
                else {
                    showMenu(this);
                }
            }
        });
    });
  
    $(document.body).addEvent('click',function(e) {
        if(!( $(e.target).getParent(dropdownMenuClass) ||
            $(e.target).hasClass(dropdownMenuClass.replace('.','')) )
        ) {
            hideAllMenu();
        }
    });
    
  })(document.id);
});