• Als Spam markieren
• Beitrag melden

• 
  Diese Gruppe Alles

• Archiv
• RSS-Feeds

• Kontakt
• Hilfe
• Impressum
• Datenschutz

ausklappbare Menus mit CSS

Hallo,

ich habe einen "Style" gefunden, der ein ausklappbares Menu beschreibt, das
ich ganz gut finde:

#positioner {position:relative; width:160px; height:155px;
padding-left:10px; float:left; background:#fff;}

.holder {position:absolute; width:150px; height:25px;}

dl.menu {width:300px; float:left; margin:-32000px 0 0 -9999px;}

.p1 {top:0;}

.p2 {top:26px;}

.p3 {top:52px;}

.p4 {top:78px;}

.p5 {top:104px;}

.p6 {top:130px;}

dl.menu a {display:block; height:25px; font:normal 11px/25px verdana,
sans-serif; text-decoration:none; text-indent:10px; border-bottom:1px solid
#fff; border-left:1px solid #fff;}



dl.menu dt {float:left; padding:0; position:relative; left:9999px;
z-index:50; margin:32000px 0 0 0;}

dl.menu dt a {width:149px; background:#f90; float:left; color:#000;}

dl.menu dt a.sub {background:#c60 url(dl-flyout/arrow.gif) no-repeat 140px
center; color:#fff;}

dl.menu dt a:hover,

dl.menu dt a:focus,

dl.menu dt a:active

{margin-right:1px; text-decoration:none; background-color:#c60;
color:#fff;}



dl.menu dd {float:left; padding:0; margin:0;height:25px;}

dl.menu dd a {position:relative; background:#f90; width:149px; color:#000;
left:10149px; top:-26px; z-index:60;}

dl.menu dd a:hover,

dl.menu dd a:focus,

dl.menu dd a:active

{margin-right:1px; background:#c60; color:#fff;}



Nur möchte ich das auch verstehen. Ganz besonders so Definitionen wie
"dl.menu" - sieht aus wie eine Klassendefinition, aber irgendwas stimmt doch
da nicht. Ich bin Anfänger und habe in keinem der Bücher solches gefunden.



Vielleicht habe ich auch nur einen Denkknoten. Wäre schön, wenn mir da
jemand helfen könnte. Danke!



Hans-Jörg



_________________________________





Der HTML-Code dazu sieht so aus:



<div id="positioner">

<div class="holder p1">

<dl class="menu">

<dt><a href="#url">Home</a></dt>

</dl>

</div>

<div class="holder p2">

<dl class="menu">

<dt><a class="sub"
href="#url">Products</a></dt>

<dd>

<a href="#url">Digital Cameras</a>

<a href="#url">Monopods &amp; Tripods</a>

<a href="#url">Flashguns &amp; Reflectors</a>

<a href="#url">Telephoto Lenses</a>

</dd>

</dl>

</div>

<div class="holder p3">

<dl class="menu">

<dt><a class="sub"
href="#url">Services</a></dt>

<dd>

<a href="#url">Enlarging</a>

<a href="#url">Framing &amp; Restoring</a>

<a href="#url">Printing</a>

<a href="#url">Copying</a>

<a href="#url">Sepia Toning</a>

</dd>

</dl>

</div>

<div class="holder p4">

<dl class="menu">

<dt><a class="sub"
href="#url">Outlets</a></dt>

<dd>

<a href="#url">London</a>

<a href="#url">Gloucestershire</a>

<a href="#url">East Midlands</a>

<a href="#url">Glasgow</a>

<a href="#url">Exeter</a>

</dd>

</dl>

</div>

<div class="holder p5">

<dl class="menu">

<dt><a class="sub" href="#url">Terms</a></dt>

<dd>

<a href="#url">Payment Methods</a>

<a href="#url">Conditions of Sale</a>

<a href="#url">Privacy Policy</a>

</dd>

</dl>

</div>

<div class="holder p6">

<dl class="menu">

<dt><a href="#url">Site Map</a></dt>

</dl>

</div>

</div>

Antworten