Removing the custom context menu from the entire page and apply to select box only
<p>How can the code below be modified such that, when the user right clicks into the drop down box, the right click context menu will appear as opposed to just right clicking anywhere in the web page?</p>

<p>Much thanks and appreciation for all your help and support.</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;head&gt;
    &lt;script language="javascript" type="text/javascript"&gt;
        var MenuObj;
        var activeMenuItem = false;

        //Function to highlight menu item
        function highlightMenuItem() {
            this.className = 'MenuHighlighted';
        }

        function deHighlightMenuItem() {
            this.className = '';
        }

        //Function to show menu on click of menu item
        function showMenu(e) {
            var myMouseX = (e || event).clientX;
            var myMouseY = (e || event).clientY;
            MenuObj.style.left = myMouseX + 'px';
            MenuObj.style.top = myMouseY + 'px';
            MenuObj.style.display = 'block';
            return false;
        }

        //Function to hide menu on click of menu item
        function hideMenu(e) {
            if (document.all) e = event;
            if (e.button == 0) {
                MenuObj.style.display = 'none';
            }
        }

        function initMenu() {
            MenuObj = document.getElementById('Menu');
            MenuObj.style.display = 'block';
            var menuItems = MenuObj.getElementsByTagName('LI');
            for (var no = 0; no &lt; menuItems.length; no++) {
                menuItems[no].onmouseover = highlightMenuItem;
                menuItems[no].onmouseout = deHighlightMenuItem;

                var aTag = menuItems[no].getElementsByTagName('A')[0];
                aTag.style.paddingLeft = '5px';
                aTag.style.width = (aTag.offsetWidth) + 'px';
                aTag.onclick = hideMenu;
            }
            MenuObj.style.display = 'none';
        }


    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        body
        {
            font-family: Trebuchet MS
            margin-left: 0px;
        }
        #Menu
        {
            /* The menu container */
            border: 1px solid #202867; /* Border around the entire menu */
            background-color: #2E5B7B; /* White background color of the menu */
            margin: 0px;
            padding: 0px;
            width: 100px; /* Width of context menu */
            font-family: arial;
            font-size: 12px;
            background-repeat: repeat-y; /* Never change these two values */
            display: none;
            position: absolute;
        }
        #Menu a
        {
            /* Links in the context menu */
            color: #fff;
            text-decoration: none;
            line-height: 25px;
            vertical-align: middle;
            height: 28px; /* Don't change these 3 values */
            display: block;
            width: 100%;
            clear: both;
        }
        #Menu li
        {
            /* Each menu item */
            list-style-type: none;
            padding: 1px;
            margin: 1px;
            cursor: pointer;
            clear: both;
        }
        #Menu li div
        {
            /* Dynamically created divs */
            cursor: pointer;
        }
        #Menu .MenuHighlighted
        {
            /* Highlighted context menu item */
            border: 1px solid #000;
            padding: 0px;
            background-color: red;
        }

        #Menu .itemTxt
        {
            float: left;
            width: 60px;
        }

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select style="width: 250px;" id="box"&gt;
  &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
  &lt;option value="saab"&gt;Saab&lt;/option&gt;
  &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
  &lt;option value="audi"&gt;Audi&lt;/option&gt;
&lt;/select&gt;

    &lt;div&gt;

                    &lt;ul id="Menu"&gt;
                        &lt;li&gt;&lt;a href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="http://www.gmail.com"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;

        &lt;script type="text/javascript"&gt;
            initMenu();
            MenuObj.style.display = 'none';
            document.documentElement.oncontextmenu = showMenu;
            document.documentElement.onclick = hideMenu;
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
