Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag09.10.2012 um 09:30 (UTC)    
Titel: Dropdownmenü

Hey,
da ich leider es nach probieren und rumschrauben an den werten nicht schaffe mein Dropdownmenü mit kleineren unterpunkten zu versehen (die sollen nicht so hoch sein und die Schrift sollte zentriert sein), muss ich euch doch mal fragen, ob ihr zufällig einen Rat habt!
Hier mein Code zum Menü:

Code:

/* common styling */
.menu {width:980px; position:absolute; background: url(http://img.webme.com/pic/f/floorball-tetenbuell/514725.jpg) no-repeat; vertical-alignment: center;}

.menu ul li a, .menu ul li a:visited {display:block; padding-top:12px; text-decoration:none; color:#000; width:98px; height:36px; text-align:center; color:#fff; background: #transparent; overflow:hidden;}

.menu ul {padding:0px; margin-left: 50px; list-style: none;}

.menu ul li {float:left; position:relative; top:-11px; left:0px;}

.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background: url(http://img.webme.com/pic/f/floorball-tetenbuell/514726.png) no-repeat;}

.menu ul li:hover ul {display:block; position:absolute; left:-50px;}

.menu ul li:hover ul li a.hide {background:#008f97; color:#fff; }

.menu ul li:hover ul li:hover a.hide {background:#008f97; color:#000; }

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li:hover ul li a:hover {background:#008f97; color:#000;}

Und hier der Code beim Text über dem Design:
Code:

<div class="menu">
<ul>
<li><a class="hide" href="home.htm">Home</a>
<li><a class="hide" href="news.htm">News</a>
<li><a class="hide" href="#">Infos</a>
<ul>
<li><a href="-Ue-ber-Uns.htm">Über uns</a></li>
<li><a href="floorball.htm">Floorball?</a></li>
<li><a href="termine.htm">Termine</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
</ul></li>
<li><a href="#">Jugend</a><ul>
<li><a href="/U11.htm">U11</a></li>
<li><a href="/U13.htm">U13</a></li>
<li><a href="/U15.htm">U15</a></li>
<li><a href="/Jugend-GF.htm">Jugend GF</a></li>
<li><a href="trainingszeiten.htm">Training</a></li>
</ul></li>
<li><a href="#">Erwachsene</a><ul>
<li><a href="/erwachsene.htm">Herren GF</a></li>
<li><a href="trainingszeiten.htm">Training</a></li>
</ul></li>
<li><a href="#">Sponsoring</a><ul>
<li><a href="sponsoren.htm">Unsere Sponsoren</a></li></ul></li>
<li><a href="#">Interaktiv</a><ul>
<li><a href="downloads.htm">Downloads</a></li>
<li><a href="/links.htm">Links</a></li>
</ul></li>
<li><a href="Mitspielen-f-.htm"><big><strong>Mitspielen?</strong></big></a></li>
</ul>
</div>

Vielen Dank und liebe Grüße!
Beitrag15.10.2012 um 22:51 (UTC)    
Titel:

Hallo,

du musst einfach richtig selektieren. Wenn du nur die Unterpunkte kleiner machen möchtest, brauchst du die a-Elemente, die direktes Kindelement eines Listenelementes, welches direktes Kindelement einer Liste (sind eigentlich alle), welche wiederum direktes Kindelement eines Listenelementes, welches wieder direktes Kind einer Liste, welche direktes Kindelement des div-Elementes mit der klasse "menu" ist. Laughing (Ich glaube jetzt wird klar, wofür Klassen gut sind)
Oder in CSS übersetzt:

Zitat:
div.menu > ul > li > ul > li > a{height:XXpx;}


Mit CSS3:
Alle Links, welche nachfahre des div-Elementes mit der Klasse "menu" sind, aber nicht zur Klasse "hide" gehören:
Zitat:
div.menu a:not(.hide){height:XXpx;}


EDIT: Ich sehe gerade, deine Hauptpunkte haben gar nicht alle die Klasse "hide", weshalb du das CSS3 wieder vergessen kannst.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 15.10.2012, 23:53, insgesamt 2-mal bearbeitet
Beitrag16.10.2012 um 13:47 (UTC)    
Titel:

Hey danke,
ich werde es bei Gelegenheit mal so einstellen. Kann geschlossen werden!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de