Wie bekomme ich das div, welches sichtbar über hover wird, in den Vordergrund?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leagueofyoutubrs</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<a href="index.html" class="Bild"><img src="Bild1.jpg"></a>
<a href="index.html"><h1><span class="highlight">League</span>ofyoutubers</h1></a>
</div>
<div class="reiter">
<img src="dropdown_lines_50x50.jpg">
<div class="reiter-content">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Social.html">Social</a></li>
<li><a href="kontakt.html">kontakt</a></li>
<li><a href="Teamspeak Regeln&Ip.html">Teamspeak Regeln & Ip</a></li>
<li><a href="gemeinsamer Youtube Kanal.html">Gemeinsamer Youtube Kanal</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login1.html">Login</a></li>
<li><a href="Datenschutzerklärung.html">Datenschutzerklärung</a></li>
<li><a href="Cookies.html">Cookies</a></li>
<li><a href="Uploadplan.html">Upload Plan</a></li>
<li><a href="Teamvorstellung.html"> Teamvorstellung</a></li>
<li><a href="Gästebuch.html">Gästebuch</a></li>
<li><a href="Rallos.html">Teamvorstellung Rallos</a></li>
<li><a href="Thronax.html">Teamvorstellung Thronax</a></li>
<li><a href="DannyMathieu.html">Teamvorstellung DannyMathieu</a></li>
<li><a href="The_Gamer.html">Teamvorstellung The_Gamer</a></li>
<li><a href="Warprince.html">Teamvorstellung Warprince</a></li>
<li><a href="Strong1Passion.html">Teamvorstellung Strong1Passion</a></li>
<li><a href="Vnetic.html">Teamvorstellung Vnetic</a></li>
<li><a href="DJKenzo.html">Teamvorstellung DJKenzo</a></li>
<li><a href="Karma.html">Teamvorstellung Karma</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>

CSS

body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
border: 2px solid black;
}
header{
background:#35424a;
color:#ffffff;
padding-top:30px;
min-height:70px;
border-bottom:#e8491d 3px solid;
clear:both;
}
header li a{
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
border:2px solid black;
}
header h1{
color:#ffffff;
float:left;
border:2px solid black;
position:relative;
}
header .highlight, header .current a{
color:#e8491d;
font-weight:bold;
border: 2px solid black;
}
header .Bild{
position:relative;
float:left;
}
header nav{
float:right;
margin-top:10px;
}
header a:hover{
color:#cccccc;
font-weight:bold;
}
ul{
margin:0;
padding:0;
border:2px solid black;
}
.reiter{
position:relative;
border:1px solid green;
height:50px;
width:50px;
float:right;
margin:10px 20px 0px;
}
.reiter-content{
display:none;
position:relative;
padding:5px;
border:1px solid red;
float:right;
box-shadow:2px 2px 5px 0px black;
background:#35424a;
}
.reiter:hover .reiter-content{
display:block;
background:white;
margin:-5px;
background:#35424a;
border:2px solid black;
}
HTML, CSS, Dropdown, Vordergrund
Wie mache ich in CSS bei einer horizontalen ul nach 3 Elementen eine neue Zeile?

Guten Abend,

wie mache ich denn bei einem <ul> nach 3 Textkörpern eine neue Zeile?

Meine Liste sieh aktuell so aus:

       <div class="timeline-services">
            <ul class="vertical">
                <li><p class="vertical">Cola01</p></li>
                <li><p class="vertical">Cola02</p></li>
                <li><p class="vertical">Cola03</p></li>
                <li><p class="vertical">Cola04</p></li>
                <li><p class="vertical">Cola05</p></li>
                <li><p class="vertical">Cola06</p></li>
                <li><p class="vertical">Cola04</p></li>
                <li><p class="vertical">Cola05</p></li>
                <li><p class="vertical">Cola06</p></li>
            </ul>
       </div>

Und mein CSS(was wichtig ist) so:

.timeline-services {
   position: absolute;
   margin-left: -262px;
   margin-top: 96px;
   max-width: 180px;
   text-align: center;
}

.timeline-services p {
   font-size: 0.8em;    
   font-family: "Lato", sans-serif;
   color: #3e5675;
}

.timeline-services ul li {
   display: inline;
   
}

.vertical {
   display: inline;    
}

Naja und das alles macht nicht das was es soll :/ Bin was so Listen begeht nicht wirklich Erfahren.

Hier ein Bild der Seite:

Vielen Dank!

LG,

Thiemo

Wie mache ich in CSS bei einer horizontalen ul nach 3 Elementen eine neue Zeile?
HTML, CSS, Webentwicklung, Webprogrammierung
HTML und CSS: was mache ich hier falsch?

Hallo,

ich bin momentan dabei, HTML und die Sprachen drum herum zu lernen, aber ich verstehe hier eine Sache einfach nicht.

Ich lerne über die Website selfHTML und übe demnach mit deren Lektionen. In dieser hat man Schritt für Schritt eine einfache Website konstruiert und nun am Ende noch mit CSS ergänzt. Ich habe meinen Quelltext sowie Stylesheet mehrmals überflogen, aber ich sehe einfach keinen Unterschied zu dem meiner Lektion. Mir geht es um die grüne Liste. Ich möchte es so haben, wie auf dem erstem Bild, in der sie schön unter <h2> steht, bei mir sieht das aber nicht so aus. Warum?

von der Lektion:

meine Version (andere Farben und fonts, das wesentliche aber gleich):

Links vom Bild jeweils das Stylesheet.

Und mein Quelltext dazu:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="data/formate.css">
        <title>Willkommen bei der Schreinerei Meier</title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a tabindex="0" aria-current="page">Startseite</a></li>
                <li><a href="4-Tabellen.html">Unsere Preise</a></li>
                <li><a href="6-Bilder.html">Bilder</a></li>
            </ul>
        </nav>
        <h1>Schreinerei Meier, ihre Werkstatt für gutes Wohnen</h1>
        <p>Willkommen bei der Schreinerei Meier im Internet!</p>
        <p>Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen. In unserer Werkstatt produzieren
        wir selbst - mit Holz aus regionaler, nachaltiger Forstwirtschaft.</p>
        <h2>Unsere Leistungen:</h2>
        <div id="leistungen">
            <ul>
                <li>Möbel nach Ihren Wünschen
                <ul>
                    <li>Küchenmöbel</li>
                    <li>Regale und Schrankwände</li>
                    <li>Badezimmermöbel</li>
                </ul>
                </li>
                <li>Haustüren</li>
                <li>Gartenzäune</li>
                <li>Reparaturen</li>
            </ul>
            <p>Telefon: 0049 12344711</p>
        </div>
        <h2>Unsere Geschichte:</h2>
        <p>Die Anfänge unserer Firma reichen bis ins Mittelalter zurück, als Horst Holzmann begann seine bisher für den Eigenbedarf
        hergestellten Möbel auch auf dem Markt der nächsten Stadt zu verkaufen.</p>
        <p>Sein Sohn führte diese Tradition fort und nach ihm noch viele weitere Kinder und Kindeskinder. Heute führt Harry Holzmann
        den Betrieb in der 15. Generation und arbeitet bereits seinen Enkel als Nachfolger ein.</p>
        <h2>So kaufen Sie bei uns ein:</h2>
        <ol>
            <li>Suchen Sie auf der Seite Ihre Stadt aus</li>
            <li>Wählen Sie Ihre Filiale in der Nähe, falls verfügbar</li>
            <li>Stöbern Sie im Sortiment und lassen Sie sich die gewünschten Produkte direkt nach Hause liefern!</li>
        </ol>
    </body>
</html>
HTML und CSS: was mache ich hier falsch?
Computer, HTML, Programmieren, CSS, Webdesign, Webdevelopment

Was möchtest Du wissen?