css - Putting two ul elements side-by-side in a menu and changing to click instead of hover -

i have menu using css , html. of sub-menus long, sub-divide them separate lists of 5 items , display them side side instead of underneath each other.

so i've put them in <div> , created 2 separate <ul> items. tried make them display: inline , set maximum height of <div> 100px doesn't force browser put second <ul> beside first one.

       <li>                 <a href="#">sub item 1.2 can long</a>                 <div>                 <ul>                     <li><a href="#">sub item 1.2.1</a></li>                     <li><a href="#">sub item 1.2.2</a></li>                     <li><a href="#">sub item 1.2.3</a></li>                     <li><a href="#">sub item 1.2.4</a></li>                     <li><a href="#">sub item 1.2.5</a></li>                  </ul>                 <ul>                     <li><a href="#">sub item 1.2.6 here should in 2nd col</a></li>                     <li><a href="#">sub item 1.2.7</a></li>                     <li><a href="#">sub item 1.2.8</a></li>                     <li><a href="#">sub item 1.2.9</a></li>                     <li><a href="#">sub item 1.2.10</a></li>                  </ul>                  </div>             </li> 

full working sample here: http://jsfiddle.net/nhfhw/17/ see issue hover on item 1 > sub item 1.2 can long

apart make menu open sub-levels on click rather hover guess not possible using css. best approach in javascript?

to have them sit side-by-side, use display:inline-block on sub-sub uls (fiddle):

#nav ul li ul li ul  {   display:inline-block;   float:none; } 

for binding clicks, here way pure js: how bind click anchor without framework (javascript)

if want use jquery, i'd recommend toggling class , using in css display/hide navigation:

$('#nav li').bind('click', function() {   $(this).toggleclass('open'); } 

then in css like:

#nav ul li.open ul {   display:block; }