Habe jetzt 30 Minuten probiert, aber bin zu keinem Ergebnis gekommen. 
Ich möchte gerne eine Klappnavigation haben, die so ähnlich ist wie diese hier: http://www.adobe.com/de/
Der momentane Stand ist, das Die Navigation IM Menüpunkt sichtbar ist trotz display:none;
Meine Vermutung: Es gibt Probleme mit dem clearen/flaoten
Danke im voraus!
Mein Code:
index.php
HTML
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="google-site-verification" content="SY6jJ-jtA3kHEnftc2FKbNkLCHBCbJtTRvFvPfHWQlY" /><!-- Google Webmaster Tools --> <link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon" /> <link href="css/reset.css" type="text/css" rel="stylesheet" /> <link href="css/main.css" type="text/css" rel="stylesheet" /> <script src="js/createHTML5Elements.js"></script> <title>Phips Homepage - Übersicht</title> </head> <body> <nav id="primary"> <!-- Navigation zwischen meinen Projekten --> <ul> <li>Blog</li> <li>Programmierung <ul> <li>Webentwicklung</li> <li>Java</li> </ul> </li> <li>Sonstige Projekte <ul> <li>Schere-Stein-Papier-Echse-Spock</li> </ul> </li> <li>Kontakt</li> <li>Impressum</li> </ul> </nav> <div class="clearLeft"></div> <header> <!-- Projektname --> </header> <nav id="secondary"> <!-- Navigation innerhalb des Projekts --> </nav> <section> </section> <footer> </footer> </body></html>main.css
CSS
html, body{ font-family: Calibi, Arial, sans-serif; font-size: 13px; line-height: 1.42em; color: #333; min-width: 800px;}nav#primary{ height: 20px; /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Opera */ background-image: -o-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5F5F5), color-stop(1, #FFFFFF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #F5F5F5 0%, #FFFFFF 100%); box-shadow: 1px 0px 3px #333;} nav#primary ul { font-weight: 900; line-height: 20px; height: 20px; } nav#primary ul li { display: block; position: relative; float: left; text-align: center; width: 20%; margin: 0 auto; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; /* * Die :hover Effekte werden zu einer sanften Animation */ } nav#primary ul li:hover { background-color: #efefef; } #nav#primary ul li ul { display: none; text-align: left; position: absolute; top: 0; left: 0; } #nav#primary ul li ul li { width: 100%; padding-left: 10px; float: none; }.clearLeft{ clear: left;}reset.css
CSS
header, nav, article, section, aside, footer{ display: block; margin: 0; padding: 0; border: none; outline: none;}body, html, form, input, label, p, a, span, pre, ul, ol, li, div{ margin: 0; padding: 0; border: none; outline: none;}h1, h2, h3, h4, h5, h6{ font-size: 1em;/* "killen" der Standartwerte. Zum Beispiel ist h1 2em */ margin: 0; padding: 0;}