Hi,
ich habe gerade nach einem Tutorial eine Dropdownnavigation erstellt. Jetzt wollte ich noch mit dem üblichen Pagewrap div die Seite zentral ausrichten. Dabei Ordnen sich die Menüpunkte jedoch unterenander an. Hier ist der Code für CSS und HTML.
ich habe gerade nach einem Tutorial eine Dropdownnavigation erstellt. Jetzt wollte ich noch mit dem üblichen Pagewrap div die Seite zentral ausrichten. Dabei Ordnen sich die Menüpunkte jedoch unterenander an. Hier ist der Code für CSS und HTML.
Code:
body {
background-color: #F2F2F2;
}
#wrapper {
text-align: left;
width: 15em;
margin-left: auto;
margin-right: auto;
}
#nav {
text-align: center;
font-family: Verdana;
letter-spacing: 0.5px;
color: white;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 14em;
background-color: #006969;
}
li ul {
display: none;
position: absolute;
}
li:hover ul {
display: block;
}
ul li ul li {
background-color: white;
color: #404039;
}
ul li ul li a {
color: #404039;
}
ul li ul li a:hover {
color: white;
background-color: #D7D7D2;
width: 14em;
display: block;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="favicon.jpg" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li> Unternehmen
<ul>
<li> <a href="#"> Historie </a> </li>
<li> <a href="#"> Mitarbeiter </a> </li>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
</ul>
</li>
<li> Angebote
<ul id="grayed">
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
</ul>
</li>
<li> Kontakt
<ul>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
<li> <a href="#"> Link </a> </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>