CSS Beispiel Submenu

Developer
Anna Prenzel
Size
2,122 Kb
Views
36,432
  1. CSS Beispiel Submenu Previews
  2. CSS Beispiel Submenu HTML Codes
  3. CSS Beispiel Submenu CSS Codes

How do I make an css beispiel submenu?

What is a css beispiel submenu? How do you make a css beispiel submenu? This script and codes were developed by Anna Prenzel on 04 September 2022, Sunday.

CSS Beispiel Submenu Previews
IQ Test

CSS Beispiel Submenu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Beispiel Submenu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Service</a> <ul class="level2"> <li><a href="#">Plakate</a></li> <li><a href="#">Schilder</a></li> <li><a href="#">Reklame</a></li> <li><a href="#">Broschüren</a></li> </ul> </li> <li><a href="#">Referenzen</a> <ul class="level2"> <li><a href="#">Projekte</a></li> <li><a href="#">Awards</a></li> </ul> </li> <li><a href="#">Kontakt</a> <ul class="level2"> <li><a href="#">FAQ</a></li> <li><a href="#">Über uns</a> <ul class="level3"> <li><a href="#">Team</a></li> <li><a href="#">Geschichte</a></li> </ul> </li> <li><a href="#">Formular</a></li> <li><a href="#">Anfahrt</a></li> </ul> </li> <li><a href="#">Impressum</a></li>
</ul>
<div style="clear:both"></div>
<h1>Willkommen auf unserer Webseite!</h1> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</body>
</html>

CSS Beispiel Submenu - Script Codes CSS Codes

li{ float: left; list-style-type: none; background-color: blue; width:100px; line-height:50px; margin-right:1px; text-align:center; position: relative;
}
/*gilt für jedes a innerhalb von einem li*/
li > a{ text-decoration: none; color: white; display:block; padding: 0 10px;
}
/*für jedes a innerhalb von einem li, wenn es mit der Maus berührt wird*/
li > a:hover{ background-color: orange;
}
/*alle Submenüs sind zunächst unsichtbar*/
.level2{ display:none; position: absolute; font-style:italic;
}
/*jedes li innerhalb der Klasse level2*/
.level2 > li{ border-top: 1px solid white;
}
/*Gilt für jedes Element mit der Klasse level2 innerhalb von einem li, wenn es mit der Maus berührt wird.*/
/*Ein Submenü wird sichtbar, sobald ein Menüitem (li) mit der Maus berührt wird*/
li:hover > .level2{ display:block;
}
.level3{ display:none; position: absolute; top:0; left:101px;
}
li:hover > .level3{ display:block;
}
/*jedes li innerhalb der Klasse level3*/
.level3 > li{ border-bottom: 1px solid white; background-color:darkblue;
}
ul{ margin: 0; padding:0;
}
CSS Beispiel Submenu - Script Codes
CSS Beispiel Submenu - Script Codes
Home Page Home
Developer Anna Prenzel
Username HSZG-Frontend-Kurs
Uploaded September 04, 2022
Rating 3
Size 2,122 Kb
Views 36,432
Do you need developer help for CSS Beispiel Submenu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anna Prenzel (HSZG-Frontend-Kurs) Script Codes
Name
JS Beispiel innerHTML3
JS Aufgabe Quiz jQuery
JS Beispiel innerHTML
Mars2020
JS Beispiel RadioButtons angularJS
JS Beispiel RadioButtons 2
JS Aufgabe Todo
JS Aufgabe Zitat
JS Beispiel onclick
JS Aufgabe Kommentar
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!