JQM Drop Down Menu in Header JS Events

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div data-role="page" id="home">
    <div id="header" data-role="header">       
     
    </div><!-- /header -->
    <div data-role="content">    
        <h3>List Title</h3>
        <ul data-role="listview" data-inset="true">
             <li><a href="#">Entry A</a></li>
             <li><a href="#">Entry B</a></li>             
        </ul>
        <a href="#logoutDialog" data-role="button" data-rel="dialog">Logout</a>
    </div><!-- /content -->
    <div data-role="footer">
        <h6>Footer </h6>
    </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="A1">
    <div id="header" data-role="header">       
        <ul id="menu-left" data-role="menu">
            <li>
               <span data-role="button" data-icon="arrow-d" data-iconpos="left">Menu</span>
               <ul data-role="listview" data-inset="true">
                   <li data-icon="false"><a href="#home">Home</a></li>
                   <li data-icon="false"><a href="#A2">Option A2</a></li>
                   <li data-icon="false"><a href="logout.html">Logout</a></li>
               </ul>
            </li>
        </ul>
        <ul id="menu-right" data-role="menu">
            <li>
                <span data-role="button" data-icon="arrow-d" data-iconpos="right">Actions</span>
                <ul data-role="listview" data-inset="true">
                   <li data-icon="false">Option B1</li>
                   <li data-icon="false">Option B2</li>
                </ul>
            </li>
        </ul>        
        <h1>A1</h1>        
    </div><!-- /header -->
    <div data-role="content">    
        <h3>Page A1</h3>
    </div><!-- /content -->
    <div data-role="footer">
        <h6>Footer </h6>
   ...

CSS

#header{
    overflow: visible; /* Let menu content overflow outside the header */
}
#header ul { /* Menu Name */
    margin-top: 1em;
}
#header .ui-btn-corner-all {
    /* border-radius: 0; /* Make the menu button squarish */
}
#header ul ul { /* Menu Item List */
    position: absolute; /* Position absolutely */
    display: none; /* Hide */
    z-index:500; /* Ensure visibility over other elements on page */
    margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header ul ul li {
    width: 150px; /* Fixed width menu items*/
    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul ul li a {
    white-space: normal; /* Stop long menu names from truncating */
}
#header ul:hover ul {
    /* display: block; /* Display menu on hover over parent */
}
#menu-left {
    float: left;
    margin-left:0.5em;
}
#menu-right {
    float: right;
    margin-right:0.5em; 
}
#menu-left ul {
    margin-left:0.5em;
}
#menu-right ul {
    margin-right: 0.5em;
    right: 0em;
}
#home .ui-header {
    height: 75px;
}
#home .ui-header h1 {
    font-size: 16pt;
    margin-bottom:0px;
}
#txtSpan {
    position: relative;
    display: inline-block;
    top: -5px; /* Doesnt seem possible to vertically center otherwise */
}
#home .ui-header h2 {
    font-size: 14pt;
    margin-top: 0px;
}

JavaScript

$('body').bind('hideOpenMenus', function(){
    $("ul:jqmData(role='menu')").find('li > ul').hide();
}); 
var menuHandler = function(e) {
    $('body').trigger('hideOpenMenus');
    $(this).find('li > ul').show();
    e.stopPropagation();
};
$("ul:jqmData(role='menu') li > ul li").click(function(e) {
   $('body').trigger('hideOpenMenus');
e.stopPropagation();
});
$('body').delegate("ul:jqmData(role='menu')",'click',menuHandler);
$('body').click(function(e){
   $('body').trigger('hideOpenMenus');
});