CSS Menü - Nach links öffnen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self CSS Menü - Nach links öffnen Fri, 05 Jun 09 14:53:27 Z https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369159#m1369159 https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369159#m1369159 <p>Schönen Guten Tag liebe Community,</p> <p>ich bin derzeit dabei mir ein Menü mit Hilfe von CSS zusammen zu basteln.</p> <p>Als Grundlage habe ich ein Menü von cssplay genommen und diese nach meinen angepasst, wenn auch eher mit Probieren statt Wissen. Ich kann nicht sehr gut mit CSS umgehen.</p> <p>Das linke Menü für meine Webseite habe ich soweit fertig gestellt. Jetzt stehe ich vor folgenden Problem: Ich möchte das Menü auch auf der rechten Seite haben, nur müssen dann die ganzen Menü-Kästchen sich nach links öffnen und nicht nach rechts wie bisher. Also einmal Seitenverkehrt. Bloß, ich weiß nicht, wie ich das CCS anpassen muss. Sind bestimmt nur 3 Werte oder so, aber ich kann es leider nicht. Vielleicht kann einer helfen? Wäre sehr nett. Ich hoffe, es war ein wenig verständlich ...</p> <p>Ich habe den verwendeten CSS Code hier hinein kopiert. Ich hoffe, dass genügt.</p> <pre><code class="block language-css"> <span class="token comment">/*Oben Menü*/</span> <span class="token comment">/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */</span> <span class="token selector">#menu_container</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #FFF<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Get rid of the margin, padding and bullets in the unordered lists */</span> <span class="token selector">#pmenu, #pmenu ul</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Set up the link size, color and borders */</span> <span class="token selector">#pmenu a, #pmenu a:visited</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>148px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#000000<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span>24px<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">text-indent</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid #000<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>1px 0 1px 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Set up the sub level borders */</span> <span class="token selector">#pmenu li ul li a, #pmenu li ul li a:visited</span> <span class="token punctuation">{</span><span class="token property">border-width</span><span class="token punctuation">:</span>0 1px 1px 1px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#pmenu li a.enclose, #pmenu li a.enclose:visited</span> <span class="token punctuation">{</span><span class="token property">border-width</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* Set up the list items */</span> <span class="token selector">#pmenu li</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* For Non-IE browsers and IE7 */</span> <span class="token selector">#pmenu li:hover</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 11%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Make the hovered list color persist */</span> <span class="token selector">#pmenu li:hover > a</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span>#64473a<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */</span> <span class="token selector">#pmenu li ul</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */</span> <span class="token selector">#pmenu li:hover > ul</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>-11px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>10px 30px 30px 30px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* Position the first sub level beneath the top level liinks */</span> <span class="token selector">#pmenu > li:hover > ul</span> <span class="token punctuation">{</span><span class="token property">left</span><span class="token punctuation">:</span>-30px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>16px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* get rid of the table */</span> <span class="token selector">#pmenu table</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>100<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>1em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */</span> <span class="token selector">* html #pmenu li a:hover</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#64473a<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* For accessibility of the top level menu when tabbing */</span> <span class="token selector">#pmenu li a:active, #pmenu li a:focus</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span>#64473a<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#000<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Set up the pointers for the sub level indication */</span> <span class="token selector">#pmenu li.fly</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span>#ffffff no-repeat right center<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#pmenu li.drop</span> <span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span>#ffffff no-repeat right center<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */</span> <span class="token comment">/* change the drop down levels from display:none; to visibility:hidden; */</span> <span class="token selector">* html #pmenu li ul</span> <span class="token punctuation">{</span><span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>-11px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>10px 30px 30px 30px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>transparent <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>transparent.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* keep the third level+ hidden when you hover on first level link */</span> <span class="token selector">#pmenu li a:hover ul ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* keep the fourth level+ hidden when you hover on second level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* keep the fifth level hidden when you hover on third level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul a:hover ul ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* keep the sixth level hidden when you hover on fourth level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the second level visible when hover on first level link and position it */</span> <span class="token selector">#pmenu li a:hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>-30px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> lef\<span class="token property">t</span><span class="token punctuation">:</span>-31px<span class="token punctuation">;</span> to\<span class="token property">p</span><span class="token punctuation">:</span>15px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the third level visible when you hover over second level link and position it and all further levels */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>-11px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the fourth level visible when you hover over third level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul a:hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the fifth level visible when you hover over fourth level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the sixth level visible when you hover over fifth level link */</span> <span class="token selector">#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */</span> </code></pre> CSS Menü - Nach links öffnen Fri, 05 Jun 09 14:55:47 Z https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369160#m1369160 https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369160#m1369160 <blockquote> <p>Bloß, ich weiß nicht, wie ich das CCS anpassen muss.</p> </blockquote> <p>Ich würde hier beginnen - die Begrifflichkeit "left" (engl. für Links) ist dir hoffentlich bekannt?</p> <blockquote> <p>/* make the third level visible when you hover over second level link and position it and all further levels */<br> #pmenu li a:hover ul a:hover ul{<br> visibility:visible; top:-11px; left:80px;<br> }</p> </blockquote> CSS Menü - Nach links öffnen Fri, 05 Jun 09 16:40:09 Z https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369161#m1369161 https://forum.selfhtml.org/self/2009/jun/5/css-menue-nach-links-oeffnen/1369161#m1369161 <p>Was soll ich sagen. Echt dämlich, aber ich steige bei mir einen CSS Code selbst nicht durch. Ich habe ausversehen das Menü von oben genommen, nicht das link. Jetzt das richtige:</p> <p>Aber was muss ich da genau ändern? Ich habe schon versucht aus lefts rights zu machen und bisschen an den Werten rumgeschaubt, aber es kommt irgendwie nicht der Effekt, den ich gerne hätte.</p> <p>Aber danke für die bisherige Hilfe. Vielleicht findet ja jemand eine Lösung .. Danke schonmal dafür.</p> <pre><code class="block language-css"><span class="token comment">/*Seite Menü*/</span> <span class="token selector">.menu</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>1000<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>12px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>-3px 0 0 0px<span class="token punctuation">;</span> <span class="token comment">/* this page only */</span> <span class="token punctuation">}</span> <span class="token comment">/* remove all the bullets, borders and padding from the default list styling */</span> <span class="token selector">.menu ul</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>148px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid #888<span class="token punctuation">;</span> <span class="token property">border-width</span><span class="token punctuation">:</span>1px 0 0 1px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.menu li</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span>transparent<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>26px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">* html .menu li</span> <span class="token punctuation">{</span><span class="token property">margin-left</span><span class="token punctuation">:</span>-16px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* get rid of the table */</span> <span class="token selector">.menu table</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>100<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>1em<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* style the links */</span> <span class="token selector">.menu a, .menu a:visited</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">,</span> arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>148px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#000<span class="token punctuation">;</span> <span class="token property">text-indent</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span>1px solid #888<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* style the link hover */</span> <span class="token selector">* html .menu a:hover</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#999<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu :hover > a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#64473a<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* hide the sub levels and give them a positon absolute so that they take up no room */</span> <span class="token selector">.menu ul ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>-1px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>100px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the second level visible when hover on first level list OR link */</span> <span class="token selector">.menu ul li:hover ul, .menu ul a:hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* keep the third level hidden when you hover on first level list OR link */</span> <span class="token selector">.menu ul :hover ul ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* keep the fourth level hidden when you hover on second level list OR link */</span> <span class="token selector">.menu ul :hover ul :hover ul ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the third level visible when you hover over second level list OR link */</span> <span class="token selector">.menu ul :hover ul :hover ul</span><span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* make the fourth level visible when you hover over third level list OR link */</span> <span class="token selector">.menu ul :hover ul :hover ul :hover ul</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span>visible<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span>#ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.menu ul ul li a</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span>149px<span class="token punctuation">;</span> <span class="token property">border-right</span><span class="token punctuation">:</span>1px solid #888<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top2</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top3</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>51px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top4</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>77px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top5</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>103px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top6</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>129px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top7</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>155px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top8</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>181px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top9</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>207px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top10</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>233px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top11</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>275px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.menu ul.top12</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span>301px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.bildmenue</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 148<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>