Joomla mobile menu conflicts

Question

I am working on Joomla website. This is the link to the website. This website with two menus is working fine on the desktop size screen but when viewed on smartphone, say, iphone 5 it shows eight drop down menus instead of two.

This is the image when this link is viewed on iphone:
.

The page opens fine on mobile device when there is only one menu. I can not see any kind of js conflict either. From where should I start diagnosing the issue?

Thanks.

EDIT: There are only two menu modules that too only on the inside links one of which is posted here. I have superfish menu template code posted here:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. 
All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$layouttype = $params->get('layouttype');
switch ($layouttype) {
case 'hor':
    $layout_class = "";
    break;
    case 'vert':
    $layout_class = "sf-vertical";
    break;
    case 'nav':
    $layout_class = "sf-navbar";
    break;  
default:
    $layout_class = "";
    break;
}
?>

<ul class="sf-menu <?php echo $class_sfx;?> <?php echo $layout_class; ?>"<?php
$tag = '';
if ($params->get('tag_id')!=NULL) {
    $tag = $params->get('tag_id').'';
    echo ' id="'.$tag.'"';
}
?>>

<?php
foreach ($list as $i => &$item) :
$class = 'item-'.$item->id;
if ($item->id == $active_id) {
    $class .= ' current';
}

if (in_array($item->id, $path)) {
    $class .= ' active';
}
elseif ($item->type == 'alias') {
    $aliasToId = $item->params->get('aliasoptions');
    if (count($path) > 0 && $aliasToId == $path[count($path)-1]) {
        $class .= ' active';
    }
    elseif (in_array($aliasToId, $path)) {
        $class .= ' alias-parent-active';
    }
}

if ($item->deeper) {
    $class .= ' deeper';
}

if ($item->parent) {
    $class .= ' parent';
}

if (!empty($class)) {
    $class = ' class="'.trim($class) .'"';
}

echo '<li'.$class.'>';

// Render the menu item.
switch ($item->type) :
    case 'separator':
    case 'url':
    case 'component':
        require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_'.$item->type);
        break;

    default:
        require JModuleHelper::getLayoutPath('mod_superfish_menu', 'default_url');
        break;
endswitch;

// The next item is deeper.
if ($item->deeper) {
    echo '<ul>';
}
// The next item is shallower.
elseif ($item->shallower) {
    echo '</li>';
    echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else {
    echo '</li>';
}
endforeach;
?></ul>

<script type="text/javascript">
// initialise plugins
jQuery(function(){
    jQuery('ul.sf-menu')
        <?php if($params->get('supersubs')): ?> 
            .supersubs({
                minWidth:    12,   // minimum width of sub-menus in em units
                maxWidth:    27,   // maximum width of sub-menus in em units
                extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                             // due to slight rounding differences and font-family
            })
    <?php endif; ?> 
    .superfish({
        hoverClass:    'sfHover',         
    pathClass:     'overideThisToUse',
    pathLevels:    1,    
    delay:         <?php echo $params->get('sf-delay'); ?>, 
    animation:     {<?php echo $params->get('sf-animation'); ?>}, 
    speed:         '<?php echo $params->get("sf-speed"); ?>',   
    speedOut:      '<?php echo $params->get("sf-speed-out"); ?>',   
    autoArrows:    false, 
    disableHI:     false, 
    useClick:      <?php echo $params->get('useClick'); ?>,
    easing:        "<?php echo $params->get('easing'); ?>",
    onInit:        function(){},
    onBeforeShow:  function(){},
    onShow:        function(){},
    onHide:        function(){},
    onIdle:        function(){}
    });
});

jQuery(function(){
    jQuery('.sf-menu').mobileMenu({
        defaultText: '<?php echo $params->get('defaultText'); ?>',
        className: '<?php echo $params->get('className'); ?>',
        subMenuClass: '<?php echo $params->get('subMenuClass'); ?>'
    });
})

jQuery(function(){
    var ismobile = navigator.userAgent.match(/(iPhone)|(iPod)|(android)|(webOS)/i)
    if(ismobile){
        jQuery('.sf-menu').sftouchscreen({});
    }
})

One more edit to include jquery.mobilemenu.js :

(function($){
$.fn.mobileMenu = function(options) {

var defaults = {
        defaultText: 'Navigate to...',
        className: 'select-menu',
        subMenuClass: 'sub-menu',
        subMenuDash: '–'
    },
    settings = $.extend( defaults, options ),
    el = $(this);

this.each(function(){
    // ad class to submenu list
    el.find('ul').addClass(settings.subMenuClass);

    // Create base menu
    $('<select />',{
        'class' : settings.className
    }).insertAfter( el );

    // Create default option
    $('<option />', {
        "value"     : '#',
        "text"      : settings.defaultText
    }).appendTo( '.' + settings.className );

    // Create select option from menu
    el.find('a, .separator').each(function(){
        var $this   = $(this),
                optText = '' + $this.text(),
                optSub  = $this.parents( '.' + settings.subMenuClass ),
                len         = optSub.length,
                dash;

        // if menu has sub menu
        if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
            dash = Array( len+1 ).join( settings.subMenuDash );
            optText = dash + optText;
        }

        if (!$this.hasClass('separator')) {

        // Now build menu and append it
        $('<option />', {
            "value" : this.href,
            "html"  : optText,
            "selected" : (this.href == window.location.href)
        }).appendTo( '.' + settings.className );

        } else {
            $('<option />', {
            "value" : '#',
            "html"  : optText
        }).appendTo( '.' + settings.className );
        }

    }); // End el.find('a').each



    // Change event on select element
    $('.' + settings.className).change(function(){
        var locations = $(this).val();
        if( locations !== '#' ) {
            window.location.href = $(this).val();
        };
    });

}); // End this.each

return this;

};
})(jQuery);

Answer 1

First of all- this view can be achieved not only on iphone- but on desktop too if you resize browser window to size that small enough.
If you'll look at you page's source code in menu sections - you'll notice something like this:

<ul class="sf-menu sf-vertical">...<ul>
<script>    
  jQuery(function(){
    jQuery('.sf-menu').mobileMenu({
    defaultText: 'Navigate to...',
    className: 'select-menu',
    subMenuClass: 'sub-menu'
    });
  })
</script>

This code is under EVERY menu (you have two) - so basically script here is looking for element with sf-menu class and make moile select menu from it.
Simple maths - you have two menus, and in every menu you have this code - so code looks twice through your code instead of single one.
Solution:
1. You need to override Joomla superfish menu module code, with your own - just delete from there ..., good article here.
2. You need to add code from previous step ... to either your template file or in the end of your template JS file.