• listview missing back button for nested list page

    1.1k Views Asked by At

    I have this kind of markup (basically a main ul with few nested ul)

    <ul id="listaRecetas" data-role="listview" data-add-back-btn="true">
      <li title ="people">
        <a href="index.php?task=browse_posts&catid=47">
          people
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Art">
        <a href="index.php?task=browse_posts&catid=14">
          Art
        </a>
        <ul class="sn">
          <li >
            <img  src="/files/uploads/1_art_alan_hydes.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=56" >
              Alan Hyde 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=48" >
              Arturo Rhodes 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=66" >
              Bob Bradbury 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=65" >
              Cecily Sheridan 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/davidgoodehill.png" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=25" >
              David Goode Hill 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=67" >
              George Sheridan 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=62" >
              Josh Burbank 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=57" >
              Leila Ward 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/3-600x600.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=58" >
              Letitia Bermejo 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=59" >
              Miquel Oliver 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/portraits-robert-graves.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=19" >
              Robert Graves 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_artist_stephanie_moog.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=60" >
              Stephanie Moog 
              <span>
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=61" >
              Sunna Wathen 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_art_david_templeton.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=148" >
              David Templeton  
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/camouflage-1985-1987.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=13" >
              Mati klarwein 
              <span>
              </span>
            </a>
          </li>
        </ul>
      </li>
      <li title ="sleep">
        <a href="index.php?task=browse_posts&catid=7">
          sleep
        </a>
        <ul class="sn">
          <li >
            <img  src="/files/uploads/villaverde-deia_big.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=16" >
              Hostal Villaverde 
              <span>
                **
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_sleep_costa_dor.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=53" >
              Hotel Costa D'or 
              <span>
                *****
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_sleep_des_puig.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=38" >
              Hotel des Puig 
              <span>
                ***
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_sleep_es_moli.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=14" >
              Hotel es Molí 
              <span>
                ****
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/La-Residencia-Hotel-Mallorca.jpeg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=15" >
              Hotel La Residencia 
              <span>
                *****
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_sleep_pension_miramar.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=64" >
              Pensiónl Miramar 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_sleep_sa_pedrissa.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=37" >
              Sa Pedrissa  
              <span>
                ****
              </span>
            </a>
          </li>
        </ul>
      </li>
      <li title ="party">
        <a href="index.php?task=browse_posts&catid=46">
          party
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="EAT & DRINK">
        <a href="index.php?task=browse_posts&catid=8">
          EAT & DRINK
        </a>
        <ul class="sn">
          <li >
            <img  src="/files/uploads/1_eatdrink_sa_font_fresca.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=35" >
              Cafè sa Font Fresca 
              <span>
                €
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_chiringuito_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=28" >
              Chiringuito de Sa Foradada 
              <span>
                €€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_sonmarroig.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=97" >
              Chiringuito Son Marroig 
              <span>
                €€
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=146" >
              Deia Restaurante 
              <span>
                €€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_el_olivo.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=81" >
              El Olivo 
              <span>
                €€€€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_es raco 1.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=49" >
              Es Raco des Teix 
              <span>
                €€€€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_sa_Cacera.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=141" >
              Sa Cacera 
              <span>
                €
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_sa_fonda.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=27" >
              Sa Fonda 
              <span>
                €
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_sa_vinya_1.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=36" >
              Sa Vinya 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_son_moragues.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=82" >
              Son Moragues Terrace & Bar 
              <span>
                €€€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_village_Cafe.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=63" >
              The Village Cafe 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_xelini.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=91" >
              Xelini 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_can_lluc.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=42" >
              Ca'n Lluch 
              <span>
                €€
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=40" >
              Ca'n Quet 
              <span>
                €€€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_cas_patro.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=41" >
              Ca's Patró March 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <div style="float:left;width:39px; height:37px">
            </div>
            <a href="mobilePage.php?task=view_post&blogid=30" >
              Deià Restaurante 
              <span>
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_espunt.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=142" >
              Es Punt 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_las_palmeras.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=32" >
              Las Palmeras 
              <span>
                €€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/Restaurante Sa Cova.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=17" >
              Sa Cova 
              <span>
                €
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/restaurant1.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=18" >
              Sebastian's 
              <span>
                €€€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_son_marroig.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=85" >
              Son Marroig 
              <span>
                €€€
              </span>
            </a>
          </li>
          <li >
            <img  src="/files/uploads/1_eatdrink_trattoria_1.jpg" style="float:left;height:39px;width:39px;" />
            <a href="mobilePage.php?task=view_post&blogid=33" >
              Trattoria Italiana 
              <span>
                €€€
              </span>
            </a>
          </li>
        </ul>
      </li>
      <li title ="To Do">
        <a href="index.php?task=browse_posts&catid=13">
          To Do
        </a>
        <ul class="sn">
          <li title ="beach">
            <a href="index.php?task=browse_posts&catid=21">
              beach
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="kids">
            <a href="index.php?task=browse_posts&catid=22">
              kids
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="tenis">
            <a href="index.php?task=browse_posts&catid=23">
              tenis
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Spa">
            <a href="index.php?task=browse_posts&catid=24">
              Spa
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="yoga">
            <a href="index.php?task=browse_posts&catid=25">
              yoga
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="gym">
            <a href="index.php?task=browse_posts&catid=26">
              gym
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="walks">
            <a href="index.php?task=browse_posts&catid=28">
              walks
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Art classes">
            <a href="index.php?task=browse_posts&catid=29">
              Art classes
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="cooking">
            <a href="index.php?task=browse_posts&catid=30">
              cooking
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="boats">
            <a href="index.php?task=browse_posts&catid=31">
              boats
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="kayak">
            <a href="index.php?task=browse_posts&catid=32">
              kayak
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="fishing">
            <a href="index.php?task=browse_posts&catid=33">
              fishing
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="museums">
            <a href="index.php?task=browse_posts&catid=34">
              museums
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Shopping">
            <a href="index.php?task=browse_posts&catid=51">
              Shopping
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Art Galleries">
            <a href="index.php?task=browse_posts&catid=52">
              Art Galleries
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Art Galleries">
            <a href="index.php?task=browse_posts&catid=53">
              Art Galleries
            </a>
            <ul class="sn">
            </ul>
          </li>
        </ul>
      </li>
      <li title ="properties">
        <a href="index.php?task=browse_posts&catid=19">
          properties
        </a>
        <ul class="sn">
          <li title ="For sale">
            <a href="index.php?task=browse_posts&catid=35">
              For sale
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="For rent">
            <a href="index.php?task=browse_posts&catid=36">
              For rent
            </a>
            <ul class="sn">
            </ul>
          </li>
          <li title ="Market reports">
            <a href="index.php?task=browse_posts&catid=48">
              Market reports
            </a>
            <ul class="sn">
            </ul>
          </li>
        </ul>
      </li>
      <li title ="Gallery">
        <a href="index.php?task=browse_posts&catid=15">
          Gallery
        </a>
        <ul class="sn">
          <li title ="photos">
            <a href="/category/gallery/15/?media=photo">
              photos
            </a>
    
          </li>
          <li title ="videos">
            <a href="/category/gallery/15/?media=video">
              videos
            </a>
    
          </li>
        </ul>
      </li>
      <li title ="classifieds">
        <a href="index.php?task=browse_posts&catid=11">
          classifieds
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="Calendar">
        <a href="index.php?task=browse_posts&catid=10">
          Calendar
        </a>
        <ul class="sn">
          <li>
            <a href="/category/calendar/10/?start_date=1">
              enero
            </a>
          </li>
          <li>
            <a  href="calendar.php?start_date=2">
              febrero
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=3">
              marzo
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=4">
              abril
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=5">
              mayo
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=6">
              June
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=7">
              July
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=8">
              agosto
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=9">
              setiembre
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=10">
              octubre
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=11">
              noviembre
            </a>
          </li>
          <li>
            <a href="calendar.php?start_date=12">
              diciembre
            </a>
          </li>
        </ul>
      </li>
      <li title ="News">
        <a href="index.php?task=browse_posts&catid=9">
          News
        </a>
        <ul class="sn">
        </ul>
      </li>
      <li title ="about">
        <a href="index.php?task=browse_posts&catid=6">
          about
        </a>
        <ul class="sn">
          <li title ="where">
            <a href="/category/about/6/#where">
              where
            </a>
    
          </li>
          <li title ="weather">
            <a href="/category/about/6/#weather">
              weather
            </a>
    
          </li>
          <li title ="history">
            <a href="/category/about/6/#history">
              history
            </a>
    
          </li>
          <li title ="Art culture">
            <a href="/category/about/6/#art_culture">
              Art culture
            </a>
    
          </li>
          <li title ="Calendar">
            <a href="/category/calendar/10/">
              Calendar
            </a>
    
          </li>
          <li title ="Numbers of interest">
            <a href="index.php?task=browse_posts&catid=45">
              Numbers of interest
            </a>
            <ul class="sn">
            </ul>
          </li>
        </ul>
      </li>
      <li title ="Home">
        <a href="index.php?task=browse_posts&catid=5">
          Home
        </a>
        <ul class="sn">
        </ul>
      </li>
    
    </ul>
    

    I tried this solution:

    jQuery Mobile Missing Back Button in Listviews

    and adding the data-add-back-button="true" to every <ul>

    But the go back button is gone...

    Just hit in any item in the ListView and you see that there is no back button.

    What am I missing?

    1

    There are 1 best solutions below

    1
    Gajotres On BEST ANSWER

    Working example: http://jsfiddle.net/Gajotres/VjPGm/

    Only thing you need to add is:

    <script type="text/javascript">
        $(document).bind("mobileinit", function() {
            $.mobile.page.prototype.options.addBackBtn = true;
        });    
    </script>  
    

    And remember, mobilinit event must be triggered BEFORE jQuery Mobile is initialized. Like in my example.

    HTML :

    <!DOCTYPE html>
    <html>
        <head>
            <title>jQM Complex Demo</title>
            <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <script type="text/javascript">
                $(document).bind("mobileinit", function() {
                $.mobile.page.prototype.options.addBackBtn = true;
                });    
            </script>              
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        </head>
        <body>
            <div data-role="page" id="index">
                <div data-theme="a" data-role="header">
                    <h3>
                        First Page
                    </h3>
                    <a href="#second" class="ui-btn-right">Next</a>
                </div>
    
                <div data-role="content">
                    <ul data-role="listview">
                        <li>
                            <h3>Animals</h3>
                            <p>All your favorites from aarkvarks to zebras.</p>
    
                            <ul>
                                <li><div>Pets</div>
                                    <span class="ui-li-count">6</span>
                                    <ul>
                                        <li><a href="index.html">Canary</a></li>
                                        <li><a href="index.html">Cat</a></li>
                                        <li><a href="index.html">Dog</a></li>
                                        <li><a href="index.html">Gerbil</a></li>
                                        <li><a href="index.html">Iguana</a></li>
                                        <li><a href="index.html">Mouse</a></li>
                                    </ul>
                                </li>
                                <li><div>Farm animals</div>
                                    <p class="ui-li-count">6</p>
                                    <ul>
                                        <li><a href="index.html">Chicken</a></li>
                                        <li><a href="index.html">Cow</a></li>
                                        <li><a href="index.html">Duck</a></li>
                                        <li><a href="index.html">Horse</a></li>
                                        <li><a href="index.html">Pig</a></li>
                                        <li><a href="index.html">Sheep</a></li>
                                    </ul>
                                </li>
                                <li><div>Wild animals</div>
                                    <p class="ui-li-count">18</p>
                                    <ul>
                                        <li><a href="index.html">Aardvark</a></li>
                                        <li><a href="index.html">Alligator</a></li>
                                        <li><a href="index.html">Ant</a></li>
                                        <li><a href="index.html">Bear</a></li>
                                        <li><a href="index.html">Beaver</a></li>
                                        <li><a href="index.html">Cougar</a></li>
                                        <li><a href="index.html">Dingo</a></li>
                                        <li><a href="index.html">Eagle</a></li>
                                        <li><a href="index.html">Elephant</a></li>
                                        <li><a href="index.html">Ferret</a></li>
                                        <li><a href="index.html">Frog</a></li>
                                        <li><a href="index.html">Giraffe</a></li>
                                        <li><a href="index.html">Lion</a></li>
                                        <li><a href="index.html">Monkey</a></li>
                                        <li><a href="index.html">Panda bear</a></li>
                                        <li><a href="index.html">Polar bear</a></li>
                                        <li><a href="index.html">Tiger</a></li>
                                        <li><a href="index.html">Zebra</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
    
                            <h3>Colors</h3>
                            <p>Fresh colors from the magic rainbow.</p>
    
                            <ul>
                                <li><a href="index.html">Blue</a></li>
                                <li><a href="index.html">Green</a></li>
                                <li><a href="index.html">Orange</a></li>
                                <li><a href="index.html">Purple</a></li>
                                <li><a href="index.html">Red</a></li>
                                <li><a href="index.html">Yellow</a></li>
                                <li><a href="index.html">Violet</a></li>
                            </ul>
                        </li>
                        <li>
                            <h3>Vehicles</h3>
                            <p>Everything from cars to planes.</p>
    
                            <ul>
                                <li><div>Cars</div>
                                    <span class="ui-li-count">22</span>
                                    <ul>
                                        <li><a href="index.html">Acura</a></li>
                                        <li><a href="index.html">Audi</a></li>
                                        <li><a href="index.html">BMW</a></li>
                                        <li><a href="index.html">Cadillac</a></li>
                                        <li><a href="index.html">Chrysler</a></li>
                                        <li><a href="index.html">Dodge</a></li>
                                        <li><a href="index.html">Ferrari</a></li>
                                        <li><a href="index.html">Ford</a></li>
                                        <li><a href="index.html">GMC</a></li>
                                        <li><a href="index.html">Honda</a></li>
                                        <li><a href="index.html">Hyundai</a></li>
                                        <li><a href="index.html">Infiniti</a></li>
                                        <li><a href="index.html">Jeep</a></li>
                                        <li><a href="index.html">Kia</a></li>
                                        <li><a href="index.html">Lexus</a></li>
                                        <li><a href="index.html">Mini</a></li>
                                        <li><a href="index.html">Nissan</a></li>
                                        <li><a href="index.html">Porsche</a></li>
                                        <li><a href="index.html">Subaru</a></li>
                                        <li><a href="index.html">Toyota</a></li>
                                        <li><a href="index.html">Volkswagon</a></li>
                                        <li><a href="index.html">Volvo</a></li>
                                    </ul>
                                </li>
                                <li><div>Planes</div>
                                    <span class="ui-li-count">7</span>
                                    <ul>
                                        <li><a href="index.html">Boeing</a></li>
                                        <li><a href="index.html">Cessna</a></li>
                                        <li><a href="index.html">Derringer</a></li>
                                        <li><a href="index.html">Embraer</a></li>
                                        <li><a href="index.html">Gulfstream</a></li>
                                        <li><a href="index.html">Piper Aircraft</a></li>
                                        <li><a href="index.html">Raytheon</a></li>
                                    </ul>
                                </li>
                                <li><div>Construction</div>
                                    <span class="ui-li-count">3</span>
                                    <ul>
                                        <li><a href="index.html">Caterpillar</a></li>
                                        <li><a href="index.html">Ford</a></li>
                                        <li><a href="index.html">John Deere</a></li>
    
                                    </ul>
                                </li>               
                            </ul>
                        </li>
                    </ul>
                </div>
    
                <div data-theme="a" data-role="footer" data-position="fixed">
    
                </div>
            </div> 
        </body>
    </html>