Ich habe ein Problem mit einer Idee zu einem Layout:

Ich hätte gerne eine vertikale Liste mit Menüpunkten. Diese Menüpunkte sollen bei einem vorhandenen Untermenü dann aber nicht unter, sondern genau daneben weiterlaufen, also quasi 2-spaltig. Die erste Liste ist also normal vertikal positioniert, die nächste Menü-Ebene soll genau daneben erscheinen, um 2 Spalten zu simulieren. Jetzt habe ich schon herum probiert:

<div id="sidebar1">

<ul class="menu">
             <li><a class="act" href="corp.html">corporate</a>

<ul class="submenu">
                     <li class="sub"> <a href="1.html">&lt;</a> 1 / 4 <a href="4.html">&gt;</a> </li>
                    </ul>

</li>
         <li><a href="fly.html">fly</a></li>
                <li><a href="play.html">play</a></li>
                <li class="down"><a href="vita.html">vita</a></li>
                <li><a href="kontakt.html">kontakt</a></li>
                <li><a href="ret.html">ret</a></li>
                <li><a href="pdf.html">pdf</a></li>
         </ul>

</div>

#sidebar1 ul.menu {list-style:none;margin: 10px 30px 0 0;padding: 0 60px 0 0;width: 340px;}

#sidebar1 ul.menu li {margin: 0 0 18px 0;padding: 0; display: block;}  

/*diesen Abschnitt tiefer */
#sidebar1 ul.menu li.down {margin: 48px 0 18px 0;padding: 0;}

#sidebar1 ul.menu li a, #sidebar1 ul.menu li a:link {color: #707173;margin: 0;padding: 0;}  
/\*aktiver Menüpunkt \*/  
#sidebar1 .menu li a.act {color:#1a171b;}  
  
#sidebar1 .menu li a:hover,.menu li a:focus,.menu li a:active {color: #1a171b;}  
/\* Submenü eingerückt neben Hauptmenü \*/  
#sidebar1 ul.submenu { display: inline; list-style:none;margin: 10px 0 0 10px;padding: 0;width: 60px;}  
#sidebar1 ul.submenu li.sub {display: inline;list-style-type: none; padding: 0;}  
#sidebar1 ul.submenu li.sub a, #sidebar1 .submenu li.sub a:link {margin: 0;padding: 0;}  

Mein Problem ist jetzt, dass durch display:inline zwar tatsächlich das Submenu neben dem 1. Menüpunkt liegt. Aber ich kriege kein 2-spaltiges Aussehen hin - die folgenden Menüpunkte breiten sich genau bis zum Ende des Containers aus und liegen damit unterhalb des Submenüs. Wenn ich padding oder margin des Hauptmenüs erhöhe, wird die gesamte Liste weiter eingerückt, inkl. des Submenüs.

Was kann ich machen? Geht das nicht?