html - formatting a double list -

html - formatting a double list -

i having problem formatting nav bar want. have html set this

<nav> <ul> <li><a href="#">1</a><li> <ul> <li><a href="#">1.1</a></li> <li><a href="#">1.2</a></li> </ul> <li><a href="#">2</a><li> <ul> <li><a href="#">2.1</a></li> <li><a href="#">2.2</a></li> </ul> <ul> <li><a href="#">2.3</a></li> <li><a href="#">2.4</a></li> </ul> <li><a href="#">3</a></li> </ul> </nav>

and css this

* { margin: 0; padding: 0; color: #294076; } html { background-image: url('2.jpeg'); } nav { min-width: 660px; height:60px; position absolute; left:240px; } header { float: left; min-width: 300px; height: 60px; font-size:45px; } nav ul { display: inline-block; list-style-type:none; margin: 6px -10px 0px 75px; padding: 0; font-size:25px; } nav ul > ul { position: absolute; } ul > ul li { float: top; } nav ul ul li { display: none; } aside { float: left; font-size: 5px; width: 160px; padding: 0px; margin: 0px; } section { font-size: 10px; position: absolute; left: 165px; min-width: 800px; } { text-decoration: none; } nav ul:hover ul li { display: block; font-size: 15px; }

the lists set decimals don't fall straight inline under parents lists. have tried messing position attribute , giving various spacing still not appear formart them correctly , moves them on top of each other. having problem getting 2 lists have under 2 appear side side. stacking on top of another. how can them stand side side , how of decimal lists format straight under parent lists?

place sub-menu <ul> elements in proper <li> items. this:

<li> <a href="#">2</a> <ul> <li><a href="#">2.1</a></li> <li><a href="#">2.2</a></li> <li><a href="#">2.3</a></li> <li><a href="#">2.4</a></li> </ul> <li>

working demo: http://jsbin.com/onugic/2/edit

always provide demo html, css, js related questions , answers.

html css html-lists