finish css basics

Sascha Schulz

2023-01-31 4554c516a0fd57ac61ed4fef55a23428e3235495

 index.html

@@ -267,7 +267,9 @@
                        #my-id /* ID */
                        html, body /* Mehrfachselektion */
                        div > p /* p die direkt unterhalb eines div sind */
                        div  p /* p die irgendwo unterhalb eines div sind */
                        a:visited /* besuchte Links */
                        div:hover /* divs über die man mit der Maus fährt */
                        span.important /* span mit der Klasse "important" */
                     </code>
                  </pre>
@@ -404,6 +406,50 @@
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Beispiel Menü</h3>
                  <iframe data-src="/assets/html/css-menu.html"></iframe>
               </section>
               <section>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        .menu-item {
                           display: inline-block;

                           position: relative;
                        }

                        .menu-item .children {
                           display: none;

                           position: absolute;
                        }

                        .menu-item:hover .children {
                           display: block;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="html" data-trim data-line-numbers>
                        <script type="text/template">
                           <div class="menu">
                              <div class="menu-item">Eins</div>
                              <div class="menu-item">
                                 Hover Me!
                                 <div class="children">
                                    <div>Item 1</div>
                                    <div>Item 2</div>
                                 </div>
                              </div>
                              <div class="menu-item">Drei</div>
                           </div>
                        </script>
                     </code>
                  </pre>
               </section>
            </section>
         </div>
      </div>