It's convenient to end lists (UL/OL) with press of an Enter key when the item content (LI) is empty. The problem is that is doesn't work properly for nested lists. Steps: a) open JavaScript console and execute these commands: document.body.contentEditable = true; document.body.innerHTML = "<ul><ul><ul><li>a</li></ul><ul><li>b</li></ul></ul></ul>"; b) place cursor after letter 'a' and press Enter - as expected, a new item with empty text at the same level as 'a' is created c) press Enter again - as expected, the empty item is removed and the UL is closed, which creates a new item in the parent's UL d) press Enter again - unexpected, a new empty LI is added at the same level as the previous empty LI, which is left there too; - repeating step d) does the same thing all the time - expected is to have removed the empty LI and closed the UL on the second level and added an empty LI to its parent, just as below: Trying the same in the second LI: 1) place cursor after letter 'b' and press Enter - as expected, a new item with empty text is added, at the same level as 'b' 2) press Enter - as expected, empty item is removed, a new item is added into parent of the removed item's UL (second level) 3) press Enter - as expected, empty item is removed, a new item is added (first level) 4) press Enter - as expected, empty item is removed, a new DIV is added directly under the BODY The split of the 'a' and 'b' into separate UL-s doesn't have any influence on the behaviour, I can merge them (*) and the outcome will be the same. (*) document.body.innerHTML = "<ul><ul><ul><li>a</li><li>b</li></ul></ul></ul>";