Moin, moin,
ich habe mir die letzten Wochen etwas HTML und Css angeeignet und versuche nun eine Website-Steuerung zu erstellen, die waagerecht nach unten aufklappt. Bisher funktioniert auch alles gut, allerdings ist der Innenabstand nach unten ein leerer Raum und ich kann mir nicht erklären wo ich das ganze abstelle. Wie ich die Grundlagen bis jetzt verstehe, bedeutet doch padding-bottom: wert; unterer Abstand?!
Ich habe aber keine Ahnung warum trotzdem Abstand von den Links nach unten existiert und möchte den gerne weghaben, mein bisheriger Quellcode sieht folgendermassen aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Eigenes Dropdown Menü</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="design.css" />
<link rel="icon" href="bilder/favicon.ico" />
<meta charset="windows-1252" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<nav id="nav" role="navigation">
<ul>
<li><a href="">Startseite</a></li>
<li>
<a href=""><span>Dropdown Test</span></a>
<ul>
<li><a href="">Thema1</a></li>
<li><a href="">Thema2</a></li>
<li><a href="">Thema3</a></li>
<li><a href="">Thema4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>body {
font: 100% arial, verdana, sans-serif;
}
ul {list-style: none;}
#nav {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
#nav > a {
display: none;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active {
background: #00ffff;
}
#nav span:after {
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em;
}
#nav > ul {
height: 50px;
background: #414141;
}
#nav > ul > li {
width: 25%;
max-width: 300px; /* TEST */
float: left;
}
#nav > ul > li > a {
height: auto;
text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #00ffff;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
background: #00ffff;
}
#nav li ul {
background: #414141;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background: #00ffff;
}Bitte helft mir, ich komme absolut nicht weiter
Nachtrag: Hat sich erledigt, man muss hier
#nav > ul {
height: 50px;
line-height: 50px;
background: #414141;
}noch line-height: selberwert wie die höhe einfügen;
Dann sieht es aus wie es sein soll:)