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
Lesezeichen