JQM Drop Down Menu in Header CSS Hover Version

by nirmaljpatel

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">
<div data-role="page" id="home">
    <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="#A1">A1</a></li>
                   <li data-icon="false"><a href="#A2">Option A2 is really long</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"><a href="#a1">Option B1</a></li>
                       <li data-icon="false"><a href="#a1">Option B2</a></li>
                </ul>
            </li>
        </ul>        
        <h1>Page Title</h1>        
    </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>
    
    </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>
   ...

CSS

#header{
    overflow: visible; /* Let menu content overflow outside the header */
}
#header ul { /* Menu Name */
    margin-top: 0.4em;
}
#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;
}