jquery at IE8 bug?? hide and show can't display normally

Question

I find in FF3.5, IE6, IE7 all work fine but only IE8...I don't which I should change. the following is my html sample

<div id="L1">Menu1
<div id="menu1">
 <ul>
  <li>111</li>
  <li>122</li>
  <li>133</li>
 </ul>
 </div>
<div id="L1">Menu22222222222222222
<div id="menu2">
 <ul>
  <li>211</li>
  <li>222</li>
  <li>233</li>
 </ul>
 </div>

and I will detect id L1 click event, if I click L1, it's ul content will show,but L1/menu2 content will be hidden. But at same time, word "Menu2" will move up to the right of 133, ...of course I set the width of the menu. I wish the html can be like

----------------
Menu 1
111 122
333
----------------
Menu222222
---------------

.but I still confuse why only IE8 can't work, but if the same line "133" , the extra space is can't large enough for Menu2xx, the Menu2xx will be at right position.

Answer 1

Your HTML is malformed. The divs with id="L1" are not closed. And you should not have two elements with the same id.