selfhtml.de - Alles für den Webmaster!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

horizont. Menü mit horizont. Dropdown rein-CSS basiert

Autor: SanneS [Beiträge: 1]
Datum: 18.08.2010 21:32:14

Hallo allerseits,

ich bastele an einem horizontalem Menü mit horizontalem Dropdown, der nur ausklappt und erst beim "roll-over" über den nächsten Menüpunkt wechselt.
in etwa wie die Menüleiste http://www.mediamarkt.de

Ich frage mich, ob das mit reinem css möglich ist, da ich bis jetzt nur das kann...
Das 2. Problem, was ich noch nicht behoben bekomme ist der durch die Liste definierte gleiche Größe (Breite) der Listenpunkte. Ich möchte nicht die gleiche Breite der Punkte, sondern wie auch im obrigen Beispiel den gleichen Abstand zwischen den einzelnen Punkten.
Es erscheint mir da nicht logisch eine Liste für dieses Problem zu verwenden, allerdings habe ich auch keine alternative Idee.
Ich hoffe, jemand hat nen Tipp für mich,

Grüße
Sanne

anbei mein Code:

HTML

<div id="wrapper">
<div id="menue">

<li><a href="#">AKTUELLES</a>

<ul>
<li><a href="termine.htm">TERMINE</a></li>
<li><a href="galerie.htm">GALERIE</a></li>
<li><a href="presse">PRESSE</a></li>
</ul>
</li>

<li><a href="#">WEINGUT</a>

<ul>
<li><a href="familie.htm">FAMILIE</a></li>
<li><a href="tradition.htm">TRADITION</a></li>
<li><a href="weinberg.htm">WEINBERG</a></li>
<li><a href="keller.htm">KELLER</a></li>
<li><a href="kunst.htm">KUNST</a></li>
</ul>
</li>

</div>
</div>

<div style="clear: both;"></div>


CSS

/*menü-layout*/
#wrapper {
margin: 0 auto;
height: 50px;
}

#wrapper #menue {
text-align: center;
font-family:"Arial narrow";
color: #00609F;
}

/*Menu*/

#wrapper #menue ul {
list-style:none;
padding:0;
margin:0;
}

#wrapper #menue ul li {
width: 120px;
overflow:hidden;
height: 20px;
float:left;
font-size: 14px;
opacity: .7;
}

#wrapper #menue ul li:hover {
overflow: visible;
}

#wrapper #menue ul ul {
margin: 1px 0 0 0px;
width: 841px;
}

#wrapper #menue ul ul li {
height: 20px;
float:left;
width: 150px;
font-size: 12px;
opacity: 1;

}

#wrapper #menue ul li a {
}

#wrapper #menue a {
text-decoration:none;
color: #00609F;
display:block;
padding: 5px;
height: 10px;
}

#wrapper #menue a:hover {
color: #00609F;
}


/*--MENÜ-ENDE--*/

Antwort schreiben

Username:	Usernamen registrieren
Passwort:	Passwort vergessen?
Thema:
	Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:	> Hallo allerseits, > > ich bastele an einem horizontalem Menü mit > horizontalem Dropdown, der nur ausklappt und erst > beim "roll-over" über den nächsten Menüpunkt > wechselt. > in etwa wie die Menüleiste www.mediamarkt.de > > Ich frage mich, ob das mit reinem css möglich > ist, da ich bis jetzt nur das kann... > Das 2. Problem, was ich noch nicht behoben > bekomme ist der durch die Liste definierte > gleiche Größe (Breite) der Listenpunkte. Ich > möchte nicht die gleiche Breite der Punkte, > sondern wie auch im obrigen Beispiel den gleichen > Abstand zwischen den einzelnen Punkten. > Es erscheint mir da nicht logisch eine Liste für > dieses Problem zu verwenden, allerdings habe ich > auch keine alternative Idee. > Ich hoffe, jemand hat nen Tipp für mich, > > Grüße > Sanne > > anbei mein Code: > > HTML > > <div id="wrapper"> > <div id="menue"> > > <li><a href="#">AKTUELLES</a> > > <ul> > <li><a > href="termine.htm">TERMINE</a></li> > <li><a > href="galerie.htm">GALERIE</a></li> > <li><a > href="presse">PRESSE</a></li> > </ul> > </li> > > <li><a href="#">WEINGUT</a> > > <ul> > <li><a > href="familie.htm">FAMILIE</a></li> > <li><a > href="tradition.htm">TRADITION</a></li> > <li><a > href="weinberg.htm">WEINBERG</a></li> > <li><a > href="keller.htm">KELLER</a></li> > <li><a > href="kunst.htm">KUNST</a></li> > </ul> > </li> > > </div> > </div> > > <div style="clear: both;"></div> > > > CSS > > /*menü-layout*/ > #wrapper { > margin: 0 auto; > height: 50px; > } > > #wrapper #menue { > text-align: center; > font-family:"Arial narrow"; > color: #00609F; > } > > /*Menu*/ > > #wrapper #menue ul { > list-style:none; > padding:0; > margin:0; > } > > #wrapper #menue ul li { > width: 120px; > overflow:hidden; > height: 20px; > float:left; > font-size: 14px; > opacity: .7; > } > > #wrapper #menue ul li:hover { > overflow: visible; > } > > #wrapper #menue ul ul { > margin: 1px 0 0 0px; > width: 841px; > } > > #wrapper #menue ul ul li { > height: 20px; > float:left; > width: 150px; > font-size: 12px; > opacity: 1; > > } > > #wrapper #menue ul li a { > } > > #wrapper #menue a { > text-decoration:none; > color: #00609F; > display:block; > padding: 5px; > height: 10px; > } > > #wrapper #menue a:hover { > color: #00609F; > } > > > /*--MENÜ-ENDE--*/ >
Link (URL):
Titel für Link:
Grafik (URL):
	Die Breite der Grafik darf 468 Pixel nicht überschreiten.

E-Mail-Benachrichtigung:

wenn auf einen Beitrag zu diesem Thema geantwortet wird
nur wenn auf meinen eigenen Beitrag geantwortet wird
nie

Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Wie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...