Hover drop down menu not work in Mobile Browser

[derickloo]

1) Script Title: Hover drop down menu not work in Mobile Browser

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I'm using old version of Smooth Navigational Menu date on 2008. This is my legacy web app. The hover drop down menu is work perfect in desktop browser but it's not work in mobile browser. Below is the menu.js file. Anything I can change to fix the problem?

     var ddsmoothmenu = {

arrowimages: { down: ['downarrowclass', '../images/down.gif', 23], right: ['rightarrowclass', '../images/right1.gif'] },
transition: { overtime: 200, outtime: 200 }, //duration of slide in/ out animation, in milliseconds
shadow: { enable: true, offsetx: 5, offsety: 5 }, //enable shadow?
showhidedelay: { showdelay: 50, hidedelay: 100 }, //set delay in milliseconds before sub menus appear and disappear, respectively

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)
ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

getajaxmenu: function ($, setting) { //function to fetch external page containing the panel DIVs
    var $menucontainer = $('#' + setting.contentsource[0]) //reference empty div on page that will hold menu
    $menucontainer.html("Loading Menu...")
    $.ajax({
        url: setting.contentsource[1], //path to external menu file
        async: true,
        error: function (ajaxrequest) {
            $menucontainer.html('Error fetching content. Server Response: ' + ajaxrequest.responseText)
        },
        success: function (content) {
            $menucontainer.html(content)
            ddsmoothmenu.buildmenu($, setting)
        }
    })
},


buildmenu: function ($, setting) {
    var smoothmenu = ddsmoothmenu
    var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL
    $mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"
    var $headers = $mainmenu.find("ul").parent()
    $headers.hover(

    function (e) {
        if (!$(this).children('a:eq(0)').hasClass('selected')) {
            $(this).children('a:eq(0)').addClass('selected');
        }
    },
    function (e) {
        if ($(this).children('a:eq(0)').attr('rel') != "yes") {
            $(this).children('a:eq(0)').removeClass('selected')
        }
    }
)
    $headers.each(function (i) { //loop through each LI header
        var $curobj = $(this).css({ zIndex: 100 - i }) //reference current LI header
        var $subul = $(this).find('ul:eq(0)').css({ display: 'block' })
        $subul.data('timers', {})
        this._dimensions = { w: this.offsetWidth, h: this.offsetHeight, subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
        this.istopheader = $curobj.parents("ul").length == 1 ? true : false //is top level header?
        $subul.css({ top: this.istopheader && setting.orientation != 'v' ? this._dimensions.h + "px" : 0 })
        $curobj.children("a:eq(0)").css(this.istopheader ? { paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
        '<img src="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
        + '" class="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
        + '" style="border:0;" />'
    )
        if (smoothmenu.shadow.enable && !smoothmenu.css3support) { //if shadows enabled and browser doesn't support CSS3 box shadows
            this._shadowoffset = { x: (this.istopheader ? $subul.offset().left + smoothmenu.shadow.offsetx : this._dimensions.w), y: (this.istopheader ? $subul.offset().top + smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
            if (this.istopheader)
                $parentshadow = $(document.body)
            else {
                var $parentLi = $curobj.parents("li:eq(0)")
                $parentshadow = $parentLi.get(0).$shadow
            }
            this.$shadow = $('<div class="ddshadow' + (this.istopheader ? ' toplevelshadow' : '') + '"></div>').prependTo($parentshadow).css({ left: this._shadowoffset.x + 'px', top: this._shadowoffset.y + 'px' })  //insert shadow DIV and set it to parent node for the next shadow div
        }
        $curobj.hover(
        function (e) {
            var $targetul = $subul //reference UL to reveal
            var header = $curobj.get(0) //reference header LI as DOM object
            clearTimeout($targetul.data('timers').hidetimer)
            $targetul.data('timers').showtimer = setTimeout(function () {
                header._offsets = { left: $curobj.offset().left, top: $curobj.offset().top }
                var menuleft = header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w
                menuleft = (header._offsets.left + menuleft + header._dimensions.subulw > $(window).width()) ? (header.istopheader && setting.orientation != 'v' ? -header._dimensions.subulw + header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
                if ($targetul.queue().length <= 1) { //if 1 or less queued animations
                    $targetul.css({ left: menuleft + "px", width: header._dimensions.subulw + 'px' }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
                    if (smoothmenu.shadow.enable && !smoothmenu.css3support) {
                        var shadowleft = header.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx : menuleft
                        var shadowtop = header.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety : header._shadowoffset.y
                        if (!header.istopheader && ddsmoothmenu.detectwebkit) { //in WebKit browsers, restore shadow's opacity to full
                            header.$shadow.css({ opacity: 1 })
                        }
                        header.$shadow.css({ overflow: '', width: header._dimensions.subulw + 'px', left: shadowleft + 'px', top: shadowtop + 'px' }).animate({ height: header._dimensions.subulh + 'px' }, ddsmoothmenu.transition.overtime)
                    }
                }
            }, ddsmoothmenu.showhidedelay.showdelay)
        },
        function (e) {
            var $targetul = $subul
            var header = $curobj.get(0)
            clearTimeout($targetul.data('timers').showtimer)
            $targetul.data('timers').hidetimer = setTimeout(function () {
                $targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
                if (smoothmenu.shadow.enable && !smoothmenu.css3support) {
                    if (ddsmoothmenu.detectwebkit) { //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
                        header.$shadow.children('div:eq(0)').css({ opacity: 0 })
                    }
                    header.$shadow.css({ overflow: 'hidden' }).animate({ height: 0 }, ddsmoothmenu.transition.outtime)
                }
            }, ddsmoothmenu.showhidedelay.hidedelay)
        }
    ) //end hover
    }) //end $headers.each()
    if (smoothmenu.shadow.enable && smoothmenu.css3support) { //if shadows enabled and browser supports CSS3 shadows
        var $toplevelul = $('#' + setting.mainmenuid + ' ul li ul')
        var css3shadow = parseInt(smoothmenu.shadow.offsetx) + "px " + parseInt(smoothmenu.shadow.offsety) + "px 5px #aaa" //construct CSS3 box-shadow value
        var shadowprop = ["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow properties
        for (var i = 0; i < shadowprop.length; i++) {
            $toplevelul.css(shadowprop[i], css3shadow)
        }
    }
    $mainmenu.find("ul").css({ display: 'none', visibility: 'visible' })
},

init: function (setting) {
    if (typeof setting.customtheme == "object" && setting.customtheme.length == 2) { //override default menu colors (default/hover) with custom set?
        var mainmenuid = '#' + setting.mainmenuid
        var mainselector = (setting.orientation == "v") ? mainmenuid : mainmenuid + ', ' + mainmenuid
        document.write('<style type="text/css">\n'
        + mainselector + ' ul li a {background:' + setting.customtheme[0] + ';}\n'
        + mainmenuid + ' ul li a:hover {background:' + setting.customtheme[1] + ';}\n'
    + '</style>')
    }
    this.shadow.enable = (document.all && !window.XMLHttpRequest) ? false : this.shadow.enable //in IE6, always disable shadow
    jQuery(document).ready(function ($) { //ajax menu?
        if (typeof setting.contentsource == "object") { //if external ajax menu
            ddsmoothmenu.getajaxmenu($, setting)
        }
        else { //else if markup menu
            ddsmoothmenu.buildmenu($, setting)
        }
    })
}

} //end ddsmoothmenu variable