XHTMLforum - CSS Einsteiger bittet um Hilfe

Hallo zusammen ! Zunächst bitte ich mal um Entschuldigung wenn ich euch nerve aber ich bin CSS Newbe.

Ich versuche im Moment ein CSS Menue u bauen das grundsätzlich auf einem Menue von Stu Nicclos basiert. Es ist/war ein horizonales Pulldown-menue das ich mir eingenen Grafiken angepasst habe.Das Menue funktioniert auch soweit.

Ich habe nur auf einem Button ein Submenue das im Moment auch einwandfrei nach unten aufgeht. LEIDER brauche ich genau diese 2 Menuepunkt dann NEBENEINANDER. Ich abe schon Bücher gewälzt und gegoogelt - mir andere Menues, bei denen geht angesehen (die waren aber nicht pulldown) - leider bin ich aber nicht weitergekommen.

Kann mir jemand helfen?

Hier mal meine Source - Ich bin für jeden Tip dankbar!!
Gruß
Frank Hamm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> PC-KLinik Limburg 2007 - inspired by Stu Nicholls | CSSplay | A Professional drop-down menu</title>
<style type="text/css">

/* ================================================== ==============
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at Stu Nicholls | CSSplay | A Professional drop-down menu
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
#multi-level {height:42px; position:relative; z-index:100;}
#multi-level .pad {float:left;}

/* Das Menue Styling */
/* Entfernen der paddings, margins and bullets aus der Liste */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:42px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:94px; background:url(multi_level-files/start.jpg) no-repeat;;}
.menu li.p2 {width:94px; background:url(multi_level-files/pkw-lackieranlage.jpg) no-repeat;;}
.menu li.p3 {width:94px; background:url(multi_level-files/lkw-lackieranlage.jpg) no-repeat;;}
.menu li.p4 {width:94px; background:url(multi_level-files/industrielackieranlage.jpg) no-repeat;;}
.menu li.p5 {width:94px; background:url(multi_level-files/vorbereitung.jpg) no-repeat;;}
.menu li.p6 {width:94px; background:url(multi_level-files/farbmisch.jpg) no-repeat;;}
.menu li.p7 {width:94px; background:url(multi_level-files/service.jpg) no-repeat;;}

/* set up the normal unhovered images in the links */
.menu li a#start {width:94px; background:url(multi_level-files/start-over.jpg) no-repeat;}
.menu li a#pkwlackierkabine {width:94px; background:url(multi_level-files/pkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#lkwlackierkabine {width:94px; background:url(multi_level-files/lkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#industrielackierkabine {width:94px; background:url(multi_level-files/industrielackieranlage-over.jpg) no-repeat;}
.menu li a#vorbereitung {width:94px; background:url(multi_level-files/vorbereitung-over.jpg) no-repeat;}
.menu li a#farbmisch {width:94px; background:url(multi_level-files/farbmisch-over.jpg) no-repeat;}
.menu li a#services {width:94px; background:url(multi_level-files/service-over.jpg) no-repeat;}

/* Styling der Liste oder Link hover. Abhängig vom verwendeten Browser */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#start:hover, .menu li:hover a#home,
.menu li a#pkwlackierkabine:hover, .menu li:hover a#pkwlackierkabine,
.menu li a#lkwlackierkabine:hover, .menu li:hover a#lkwlackierkabine,
.menu li a#industrielackierkabine:hover, .menu li:hover a#industrielackierkabine,
.menu li a#vorbereitung:hover, .menu li:hover a#vorbereitung,
.menu li a#farbmisch:hover, .menu li:hover a#farbmisch,
.menu li a#services:hover, .menu li:hover a#farbmisch {background:transparent;}

/* naechste Menuebene wird unsichtbar gemacht indem sie mit left:-9999px; top:-9999px; aus dem Bildschirm geschoben wird. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* Einstellungen fuer das erste Dropdown Sublevel level */
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

</style>

</style>
</head>

<body>
<div id="multi-level">
<img class="pad" src="multi_level-files/quermenue-button-1.jpg" title="" alt="" />
<ul class="menu">
<li class="top p1"><a href="http://www.cssplay.co.uk" id="start" class="top_link"><span>Home</span></a></li>
<li class="top p2"><a href="http://www.cssplay.co.uk" id="pkwlackierkabine" class="top_link"><span>pkwlackierkabine</span></a>

<ul class="sub">
<li><a href="../ie/">Standart</a></li>
<li><a href="../ie/">Profi</a></li>
</ul>

</li>

<li class="top p3"><a href="http://www.cssplay.co.uk" id="lkwlackierkabine" class="top_link"><span>lkwlackierkabine</span></a></li>

<li class="top p4"><a href="http://www.cssplay.co.uk" id="industrielackierkabine" class="top_link"><span>industrielackierkabine</span></a></li>

<li class="top p5"><a href="http://www.cssplay.co.uk" id="vorbereitung" class="top_link"><span>vorbereitung</span></a></li>

<li class="top p6"><a href="http://www.cssplay.co.uk" id="farbmisch" class="top_link"><span>farbmisch</span></a></li>

<li class="top p7"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>services</span></a></li>

<img class="pad" src="multi_level-files/quermenue-button-8.jpg" title="" alt="" />

</div>
</body>
</html>