Auf Thema antworten 2026

Beitrag

<blockquote data-quote="cebito" data-source="post: 2021748" data-attributes="member: 173078">AW: WIP - Webshowroom simonpicosSchon passiert...[CODE]/************** nav allgemein **************/.nav{&nbsp; &nbsp; width: 546px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; margin:350px auto;}.nav ul{&nbsp; &nbsp; list-style: none;}.nav li&gt;ul{&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; transition: opacity .6s;&nbsp; &nbsp; box-shadow: 0 3px 3px rgba(0,0,0,.6);&nbsp; &nbsp; border-bottom-left-radius: 6px;&nbsp; &nbsp; border-bottom-right-radius: 6px;}.nav li a{&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-family: &#039;Droid Sans&#039;, sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; width: 120px;&nbsp; &nbsp; padding: 8px 26px;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; transition: all .2s;}/***************** Level 1 *****************/.dropdown-level-1{&nbsp; &nbsp; border-radius: 6px;&nbsp; &nbsp; width: 546px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; box-shadow: 0 2px 3px rgba(0,0,0,.6);}.dropdown-level-1&gt;li{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; float: left;&nbsp; &nbsp; overflow: visible;}.dropdown-level-1&gt;li:first-of-type&gt;a{&nbsp; &nbsp; border-top-left-radius: 6px;&nbsp; &nbsp; border-bottom-left-radius: 6px;}.dropdown-level-1&gt;li:last-of-type&gt;a{&nbsp; &nbsp; border-top-right-radius: 6px;&nbsp; &nbsp; border-bottom-right-radius: 6px;}.dropdown-level-1&gt;li&gt;a{&nbsp; &nbsp; line-height: 50px;&nbsp; &nbsp; padding: 0px 26px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; width:auto;}/***************** Level 2 *****************/.dropdown-level-2&gt;li:last-of-type&gt;a{&nbsp; &nbsp; border-bottom-left-radius: 6px;&nbsp; &nbsp; border-bottom-right-radius: 6px;}.dropdown-level-2&gt;li:first-of-type&gt;a{&nbsp; &nbsp; box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset;}/***************** Level 3 *****************/.dropdown-level-3{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 172px;&nbsp; &nbsp; margin-top: -32px;&nbsp; &nbsp; z-index: -2;&nbsp; &nbsp; border-top-right-radius: 6px;}.dropdown-level-3&gt;li:last-of-type&gt;a{&nbsp; &nbsp; border-bottom-left-radius: 6px;&nbsp; &nbsp; border-bottom-right-radius: 6px;}.dropdown-level-3&gt;li:first-of-type&gt;a{&nbsp; &nbsp; border-top-right-radius: 6px;}/****************** Hover ******************/.nav li:hover&gt;ul{&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; visibility: visible;}/***************** Farben ******************/.blue .dropdown-level-1&gt;li&gt;a,.blue .dropdown-level-2&gt;li&gt;a:hover,.blue .dropdown-level-3&gt;li&gt;a:hover{&nbsp; &nbsp; background: #2977d1;}.blue .dropdown-level-1&gt;li&gt;a:hover,.blue .dropdown-level-2&gt;li&gt;a,.blue .dropdown-level-3&gt;li&gt;a{&nbsp; &nbsp; background: #5393dd;}/* ****** */.red .dropdown-level-1&gt;li&gt;a,.red .dropdown-level-2&gt;li&gt;a:hover,.red .dropdown-level-3&gt;li&gt;a:hover{&nbsp; &nbsp; background: #d1294b;}.red .dropdown-level-1&gt;li&gt;a:hover,.red .dropdown-level-2&gt;li&gt;a,.red .dropdown-level-3&gt;li&gt;a{&nbsp; &nbsp; background: #dd536f;}/* ***** */.orange .dropdown-level-1&gt;li&gt;a,.orange .dropdown-level-2&gt;li&gt;a:hover,.orange .dropdown-level-3&gt;li&gt;a:hover{&nbsp; &nbsp; background: #e48416;}.orange .dropdown-level-1&gt;li&gt;a:hover,.orange .dropdown-level-2&gt;li&gt;a,.orange .dropdown-level-3&gt;li&gt;a{&nbsp; &nbsp; background: #ec9a3c;}/* ***** */.violet .dropdown-level-1&gt;li&gt;a,.violet .dropdown-level-2&gt;li&gt;a:hover,.violet .dropdown-level-3&gt;li&gt;a:hover{&nbsp; &nbsp; background: #8f53dd;}.violet .dropdown-level-1&gt;li&gt;a:hover,.violet .dropdown-level-2&gt;li&gt;a,.violet .dropdown-level-3&gt;li&gt;a{&nbsp; &nbsp; background: #7229d1;}[/CODE]... und wie man sieht, muss man hier auch nur einen Codeschnipsel kopieren und Farben ändern ist auch gleich viel einfacher <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />Dein Flackerprob hab ich jetzt noch nicht gemacht, muss ich mir dann mal in Ruhe anschauen.</blockquote>

[QUOTE="cebito, post: 2021748, member: 173078"] [b]AW: WIP - Webshowroom simonpicos[/b] Schon passiert... [CODE]/************** nav allgemein **************/ .nav{ width: 546px; height: 50px; margin:350px auto; } .nav ul{ list-style: none; } .nav li>ul{ opacity: 0; visibility: hidden; position: absolute; transition: opacity .6s; box-shadow: 0 3px 3px rgba(0,0,0,.6); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .nav li a{ display: inline-block; text-decoration: none; font-family: 'Droid Sans', sans-serif; font-size: 14px; width: 120px; padding: 8px 26px; color: #fff; transition: all .2s; } /***************** Level 1 *****************/ .dropdown-level-1{ border-radius: 6px; width: 546px; height: 50px; box-shadow: 0 2px 3px rgba(0,0,0,.6); } .dropdown-level-1>li{ position: relative; display: inline-block; float: left; overflow: visible; } .dropdown-level-1>li:first-of-type>a{ border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .dropdown-level-1>li:last-of-type>a{ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .dropdown-level-1>li>a{ line-height: 50px; padding: 0px 26px; height: 50px; width:auto; } /***************** Level 2 *****************/ .dropdown-level-2>li:last-of-type>a{ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .dropdown-level-2>li:first-of-type>a{ box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset; } /***************** Level 3 *****************/ .dropdown-level-3{ position: absolute; left: 172px; margin-top: -32px; z-index: -2; border-top-right-radius: 6px; } .dropdown-level-3>li:last-of-type>a{ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .dropdown-level-3>li:first-of-type>a{ border-top-right-radius: 6px; } /****************** Hover ******************/ .nav li:hover>ul{ opacity: 1; visibility: visible; } /***************** Farben ******************/ .blue .dropdown-level-1>li>a,.blue .dropdown-level-2>li>a:hover,.blue .dropdown-level-3>li>a:hover{ background: #2977d1; } .blue .dropdown-level-1>li>a:hover,.blue .dropdown-level-2>li>a,.blue .dropdown-level-3>li>a{ background: #5393dd; } /* ****** */ .red .dropdown-level-1>li>a,.red .dropdown-level-2>li>a:hover,.red .dropdown-level-3>li>a:hover{ background: #d1294b; } .red .dropdown-level-1>li>a:hover,.red .dropdown-level-2>li>a,.red .dropdown-level-3>li>a{ background: #dd536f; } /* ***** */ .orange .dropdown-level-1>li>a,.orange .dropdown-level-2>li>a:hover,.orange .dropdown-level-3>li>a:hover{ background: #e48416; } .orange .dropdown-level-1>li>a:hover,.orange .dropdown-level-2>li>a,.orange .dropdown-level-3>li>a{ background: #ec9a3c; } /* ***** */ .violet .dropdown-level-1>li>a,.violet .dropdown-level-2>li>a:hover,.violet .dropdown-level-3>li>a:hover{ background: #8f53dd; } .violet .dropdown-level-1>li>a:hover,.violet .dropdown-level-2>li>a,.violet .dropdown-level-3>li>a{ background: #7229d1; }[/CODE]... und wie man sieht, muss man hier auch nur einen Codeschnipsel kopieren und Farben ändern ist auch gleich viel einfacher ;) Dein Flackerprob hab ich jetzt noch nicht gemacht, muss ich mir dann mal in Ruhe anschauen. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?