Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
horizont. Menü mit horizont. Dropdown rein-CSS basiert
Autor: SanneS
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--*/
