Hey,
ich habe ein Problem mit meinem CSS-Menü.
Screenshot:
Die Menüpunkte sollen zentriert sein und das Dropdown-Menü bei Portfolio kann ich irgendwie auch nicht verändern.
index.html
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>
<a href="#">Startseite</a>
</li>
<li>
<a href="#">Über mich</a>
</li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="#">Fotos</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li>
<a href="#">Kontakt</a>
</li>
</ul>
</div>
<div id="header"></div>
<div id="main">
<p>Das ist die Main</p>
</div>
<div id="footer">
<p>Das ist der Footer</p>
</div>
</div>
</body>
</html>
style.css
Code:
@charset "UTF-8";
html, body {
background-color: #D8D8D8;
margin: 0;
padding: 0;
height: 100%;
}
#container {
width: 100%;
min-height: 100%;
position: absolute;
}
#header {
position: relative;
width: 100%;
top: 0;
height: 220px;
background: url(../layout/header.png) no-repeat;
background-position: center;
z-index: 3;
}
#nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 45px;
background-color: #000;
opacity: 0.4;
z-index: 4;
}
#nav ul {
list-style-type:none;
list-style-image:none;
}
#nav li {
float:left;
margin-left: 10px;
margin-right: 10px;
}
#nav li a {
float:left;
text-align: center;
width: 120px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#nav li ul {
display:none;
}
#nav li a:hover {
box-shadow: 0px 8px 6px -6px #888;
-moz-box-shadow: 0px 8px 6px -6px #888;
-webkit-box-shadow: 0px 8px 6px -6px #888;
}
#nav li ul {
width: 50px;
margin-top: 5px;
background-color: #000;
}
#nav li:hover ul {
display: block;
}
#main {
width: 60%;
background-color: #FFFFFF;
padding: 20px;
position:relative;
margin-left:auto;
margin-right:auto;
box-shadow: 0px 0 10px #000;
-webkit-box-shadow: 0px 0 10px #000;
-moz-box-shadow: 0px 0 10px #000;
z-index: 1;
}
#footer {
width: 100%;
height: 50px;
position: absolute;
margin-top:20px;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 2
}
Ich hoffe ihr könnt mir helfen.
Gruß
Critone