Zweizeilige Navi mit CSS

[McMuhaus]

Hey,

ich bin auf der Suche nach einer Möglichkeit, folgende zweizeilige Navi nur mit CSS umzusetzen.
Vielleicht ist das ganze ein Kinderspiel und nicht weiter kompliziert, aber ich bin noch nicht dahinter gekommen, wie.

Es geht um diese Navi:
http://www.fangdenfisch.de/navi/navi.html

Es ist jetzt mit vielen einzelnen Ebenen gelöst, die bei BEdarf ein und ausgeblendet werden. Das kann aber nicht das wahre sein.
Also her mit euren Ideen, wie ich das anders machen kann!

Danke!

 

[Jakob]

AW: Zweizeilige Navi mit CSS

Du machst eine unordered list (<ul>) und packst da alle Punkte der Hierarchie nach ein.

Dann setzt Du die <li> per CSS auf float: left. Die Links (<a>) auf display: block.

Dann noch li li { display: none; position: absolute; left: 30px; top: 50px; // oä. } und Du hast’s.

 

[McMuhaus]

AW: Zweizeilige Navi mit CSS

Vielen Dank schon mal.
Aber irgendwie komme ich damit noch nicht so zurecht.
Wie erreiche ich denn das Einblenden bei hover?
Und wichtig wäre auch der senkrechte Strich an der Navi. Geht das mit Boxen? Oder wird das allein mit CSS zu kompliziert.

Hier sind mal meine entsprechenden Codeabschnitte:

<div id="navi">
    <ul>
    	<li>Restaurant
        	<ul><li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li></ul>
</li>
        <li>Hotel
	  		<ul><li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li></ul>
</li>
        <li>Specials
	  		<ul><li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li></ul>
        </li>
    </ul>
      <a href="../../index.html"><img src="../../img/logo.jpg" alt="logo" /></a> </div>

#navi ul {
	list-style: none;
	position: absolute;
	top: 50px;
}
#navi li {
	float: left;
}
#navi a:hover {
	display: block;
}
#navi li li {
	display: none;
	position: absolute;
	left: 30px;
	top: 50px;
}

Danke!

 

[McMuhaus]

AW: Zweizeilige Navi mit CSS

*push*
Ich will ja überhaupt nicht drängen, aber diese Navi lässt mir einfach keine Ruhe...

 

[Jakob]

AW: Zweizeilige Navi mit CSS

Mir scheint eher Du willst einen kompletten Code vorgegeben bekommen und Dich selbst um nix zu kümmern. Dazu hat hier aber keiner Zeit oder Lust.

Sieh Dir doch mal http://www.duoh.com/csstutorials/2levelmenu/index.html an. Ist denke ich genau das, was Du willst. Gefunden per Google „CSS Navigation“.