Back button behaviour

Back button behaviour

I'm having challenges with the behavior of the back button.  If I have several internal pages and click through multiple levels then BACK does not navigate back through the levels to return to top level.  

See below for the set of pages.

Steps to reproduce.
1) Open file - #MainMenu is shown
2)  Click "About" link - #AboutPage is shown
3) Click "Details" link - #AboutDetailPage is shown
4) Click back button - #AboutPage is shown
5) Click back button - #AboutDetailPage is shown  (My expectation here is the #MainMenu should be shown)
6) Click back button - #AboutPage is shown

I get the same behavior using the browser's back button or the auto generated button on the header.

Here's the pages I'm testing with:
  1.     <div id="MainMenu" data-role="page" >
  2.         <div data-role="header">
  3.             <h1>MobileTest</h1>
  4.         </div>
  5.         <div data-role="content">
  6.             <ul data-role="listview">
  7.                 <li><a href="#AboutPage">About</a></li>
  8.                 <li><a href="#TestPage">Test Page</a></li>
  9.             </ul>
  10.         </div>
  11.     </div>

  13.     <div id="AboutPage" data-role="page" >
  14.         <div data-role="header">
  15.             <h1>About</h1>
  16.         </div>
  17.         <div data-role="content">
  18.             <h2>About</h2>
  19. <a href="#AboutDetailPage" />Details</a>
  20.         </div>
  21.     </div>

  23.     
  24.     <div id="AboutDetailPage" data-role="page" >
  25.         <div data-role="header">
  26.             <h1>About-Details</h1>
  27.         </div>
  28.         <div data-role="content">
  29.             <h2>About-Details</h2>
  30.         </div>
  31.     </div>

  33. <div id="TestPage" data-role="page" >
  34.         <div data-role="header">
  35.             <h1>Test</h1>
  36.         </div>
  37.         <div data-role="content">
  38.             <h2>Test Page</h2>
  39.         </div>
  40.     </div>