Building menu with floated and non-floated list items

Question

Using the html structure given in the code snippet (the structure can not be altered, I can just alter the CSS), I would like to achieve following menu layout:

But my CSS is causing a gap between "Item 1a" and "Item 2":

Don't know where this gap derives from and would like to know how to achieve the layout wanted.

 ul, li { display: block; float: left; } ul.menu li { padding-right: 1em; } ul.submenu li { display: block; float: none; } div { height: 0; float: left; padding-left: 1em; } 

 <nav> <ul class="menu"> <li><a href="#1">Item 1</a> <div> <ul class="submenu"> <li><a href="#1a">Item 1a</a></li> <li><a href="#1b">Item 1b</a></li> <li><a href="#1c">Item 1c</a></li> <li><a href="#1d">Item 1d</a></li> </ul> </div> </li> <li><a href="#2">Item 2</a></li> <li><a href="#3">Item 3</a></li> <li><a href="#4">Item 4</a></li> </ul> </nav> 

Answer 1

Removed padding and margin from UL and LI, removed, height: 0 on the div. Seems to work. I stand corrected about DIV no allowed in LI.

 ul, li { display: block; margin-left: 0px; padding-left: 0px; } ul.menu li { padding-right: 1em; } ul.menu > li { float: left; } ul.menu > li > a { display: block; } ul.submenu li { display: block; } div { float: left; padding-left: 1em; } 

 <nav> <ul class="menu"> <li><a href="#1">Item 1</a> <div> <ul class="submenu"> <li><a href="#1a">Item 1a</a></li> <li><a href="#1b">Item 1b</a></li> <li><a href="#1c">Item 1c</a></li> <li><a href="#1d">Item 1d</a></li> </ul> </div> </li> <li><a href="#2">Item 2</a></li> <li><a href="#3">Item 3</a></li> <li><a href="#4">Item 4</a></li> </ul> </nav>