Dropdown Navigation

:) Problem gelöst,
hab so lange überlegt bis es klick gemacht hat.
Falls Jemand ein Dropdown-Menü braucht, hier der CSS-Code

Code:

---

#menu {
        width: 100%;
        margin-left: 5px;
        margin-top: 0;
}

#menu h3 {
        font-size: 17px;
        color: #fff;
        padding: 10px;
        margin: 0;
        background: #000;
        line-height: 20px;
}

#menu ul {
        position: absolute;
        margin: 0 auto;
        list-style: none;
}

#menu ul li {
        float: left;
        margin: 0 28px 10px -5px;
        font-size: 17px;
        font-family: arial, helvetica;
        line-height: 35px;
}

#menu ul li a {
        display: block;
        color: #fff;
        text-decoration: none;       
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}

#menu ul li a:hover {
        color: #999;
}

#menu ul ul {
        position: absolute;
        top: -9999px;
        background: #000;
        padding: 0;
        margin: 5px 0 0 -8px;
        -webkit-box-shadow: 0 10px 20px #888;
        -moz-box-shadow: 0 10px 20px #888;
        box-shadow: 0 10px 20px #888;
}
#menu ul ul ul {
        top: -9999px;
        background: #000;
        padding: 0;
        margin: 0 0 0 1px;
        -webkit-box-shadow: 0 10px 20px #888;
        -moz-box-shadow: 0 10px 20px #888;
        box-shadow: 0 10px 20px #888;
}

#menu ul li:hover ul {
        display: block;
        top: 30px;
}
#menu .level_3 {
        margin-top: -25px;
        }
#menu ul ul li {
        width: 200px;
        float: none;
        font-size: 16px;
        padding: 5px 10px;
        text-align: left;
        margin: 0;
        border-bottom: 1px solid #454545;
        line-height: 20px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}
#menu ul ul li ul {
        float: none;
        font-size: 16px;
        padding: 0;
        text-align: left;
        margin: 0;
        border-bottom: 1px solid #454545;
        line-height: 20px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}

#menu ul li:hover ul ul {
display: none;
}

#menu ul ul li:hover ul {
display: block;
position: absolute;
top: auto;
left: 100%;
}

#menu ul ul a {
        color: #fff;
        text-decoration: none;
}

#menu ul ul li.all {
        font-size: 12px;
        border-bottom: none;
        text-transform: none;
}

#menu ul ul li:hover {
        background: #333;
        color: #fff;
}

.active {
        color: #999;
}

---

Warscheinlich ist der Code nicht ganz sauber, aber es funzt.
Gruß
Paco

Moin,


sieht nach nem klassischen CSS-Float-Clear Problem aus.

Lies dir dieses mal durch:
http://css-tricks.com/all-about-floats/