Hallo!
Folgendes Problem:
Wie im Bild zu sehen ist, liegen die Navigation (Drop Down) und der Maintextblock nebeneinander, statt untereinander.
Wie kann man das beheben?
Möchte gerne am Ende auch das DropDown zentriert haben, weiß aber nicht, ob mein Code ausreicht dafür.
Mein CSS-Code:
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:medium;
background-image: url("pics/feuer2.jpg");
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
text-align: center;
/* navigation */
#nav {
width:40em;
margin:auto;
}
#nav ul{ list-style-type:none; margin: 0; padding: 0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; }
* html li li { display:inline; } /* IE6 Bugfix... */
/* mainbox */
#mainbox {
margin: auto;
margin-top: 230px;
width: 415px;
background-color: #F27B24;
opacity: 0.8;
border: 1px grey solid;
padding: 20px;
overflow: auto;
}