Menü (eigenes Template) bei Joomla!

[Xym]

Guten Tag,

ich benutze gerne Joomla für Homepages.
Nun wollte ich gerne dafür ein eigenes Template erstellen.
Doch das Menü macht mir einfach zu schaffen.
In der index.php habe ich das stehen

<div id="top_menu">
		<jdoc:include type="modules" name="top_menu" style="none" />
	</div>

Im Quelltext auf der Homepage steht dann das.

<div id="top_menu">


	<ul class="menu">
    
		<li class="item-101 current active deeper parent">
    		<a href="/" >Home</a>  
    	</li>
    
    	<li class="item-109">
    		<a href="/index.php/gaestebuch" >Gästebuch</a>	
    	</li>
        
	</ul>   

</div>

So mein erstes Problem ist, dass die beiden Links direkt neben einander stehen und ich einfach keine Lücke dazwischen bekomme. Und zweitens finde ich keinen guten ansatz für ein Dropdown Menü. Denn alle die ich gemacht habe, hatten einen anderen Htmlteil. Aber hier kann ich den ja nicht verändern, oder****

Hier ist noch der Cssteil.

#top_menu {
	width: 752px;
	height: 37px;
	margin-left:auto;
	margin-right:auto;
	list-style:none;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DD0005), to(#750003));
    background: -moz-linear-gradient(0% 6% 270deg,#DD0005, #750003);
	opacity: 0.8;       /* modern browser */  
    -moz-opacity: 0.8;  /* older Mozilla browser */  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 in Standard Compliant Mode */  
    filter:alpha(opacity=80); /* IE5.x -7.0 */
}

.menu a {
	text-decoration:none;
	color: #FFF;
	font-size:24px;
	float:left;
}

.menu a:hover {
	color: #FFF;
	text-shadow: #000000 -1px 1px 2px;
	text-shadow: #000000 -2px 2px 1px;
	letter-spacing: 1px;
	/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#292929), to(#9B9B9B));
    background: -moz-linear-gradient(0% 6% 270deg,#292929, #9B9B9B); */
}

.menu {
	list-style:none;
}

Hoffe ihr habt mein Problem verstanden und könnt mir helfen.

 

[Entwicklerpages]

Du musst die li Elemente ansprechen:

.menu li {
 margin-left: 2px;
}

Und wenn du ein Dropdown suchst, versuch einfach die untermenüs zu verstecken (visibility: hidden; oder so ähnlich) Und wenn man mit der maus über das Hauptmenu geht, zeigst du es einfach wieder an. Musst mal danach Googeln. Gibt eigentlich ne menge darüber und meistens auch mit Listen.

 

[Xym]

Also wenn ich den Teil einfüge, passiert leider nichts.
Das mit dem Dropdownmenü habe ich auch immer so gemacht, doch die Anordnung war wieder das Problem. Die habe ich früher im html teil mit einer Tabelle gemacht, was hier aber nicht geht..

 

[Entwicklerpages]

Hmm, beim ersten problem bin ich nun auch Ratlos.
Und beim Dropdown menu wüsste ich nicht einmal wie ich das mit ner Tabelle machen sollte
ICh mach das meistens so:
CSS: (Nicht getestet - nur aus der Erinnerung)

#dropdown {
list-style: none;
}
#dropdown li {
float: left;
}
#dropdown li ul {
position: absolute;
visibility: hidden;
}
#dropdown li:hover ul {
visibility: visible;
}

Das sollte funktionieren, auch wenn es natürlich daneben aus sieht.
Aber ich garantiere nichts! Ich hab das mal vor einer Ewigkeit gemacht...
HTML:

<ul id="dropdown">
<li>Test 1 <ul>
<li>Test 1 1</li>
<li>Test 1 2</li>
</ul></li>
</ul>