複数のレベルを持つ複数行のリスト

私のページには3つのレベルのデータがあり、第1レベルでは複数行のデータを表示する必要があります。複数のレベルを持つ複数行のリスト

レベルが1つしかない場合、マルチラインは完璧に機能します。次のコードはうまくいきます。

<ul data-role="listview" 
    data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e"> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>150 EUR</h4> 
       <p>12:50 to 14:15 (1h25) Direct</p> 
      </li> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>175 EUR</h4> 
       <p>15:00 to 16:15 (1h15) Direct</p> 
      </li> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>225 EUR</h4> 
       <p>16:00 to 20:00 (4h) wait 2h Frankfurt, Germany</p> 
      </li> 
     </ul>

そして完璧な結果を示します。

enter image description here

しかし、私は物事が破壊開始ネストされたものを表示するには、いくつかのULを追加します。

次の行を入力します。

 <ul data-role="listview" data-theme="a" data-inset="true" data-dividertheme="c" data-counttheme="e"> 
      <li> 
       <h3><a href="">Paris (CDG) to Munich (MUC)</a></h3> 
       <h4>150 EUR</h4> 
       <p>12:50 to 14:15 (1h25) Direct</p> 
       <ul> 
        <li><a href="#">View</a></li> 
        <li><a href="#">Submit</a></li> 
        <li><a href="#">Reset</a></li> 
       </ul> 
      </li> 
      </UL>

そして、壊れ始めます。そして次のような結果を出す。 enter image description here