Dropdown Menü funktioniert nur wenn Kategorie angewählt und responsive Design

[andi.ebar]

So meine Lieben,


hoffentlich vorerst das letzte mal das ich euch auf den Wecker gehe - ich habe mir auch schon fest vorgenommen der MoziloGemeinde ein Template zu sponsern sobald ich mein Job hier fertig habe ..


Nun habe ich noch ein Problem was ich nicht zu lösen vermag - und zwar funktioniert mein Dropdown Menü nur wenn ich mich in der selbigen Kategorie befinde - sprich wenn ich nicht in dieser bin und mit der Maus über den Bereich fahre worauf das Dropdownmenü aufklappen sollte passiert niente ..

http://www.zwicknagel-fahrraeder.de/beta

Navicode:

Code Auswählen Erweitern



mainmenu {


    width: auto;

}





ul.mainmenu {
    padding: 2px;
margin-top: 0px;
    margin-left: 25px;


 
}


  ul.mainmenu:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: visible;
}



/*Mainmenu*/

ul.mainmenu li.mainmenu1 {
    list-style: none;
    float:left;
margin: 0px;
padding: 0px;
    border-right: 1px solid #dfdfdf;
}
ul.mainmenu li.mainmenu2 {
    list-style: none;
    float:left;
margin: 0px;
padding: 0px;
    border-right: 1px solid #dfdfdf;
}
ul.mainmenu li.mainmenu3 {
    list-style: none;
    float:left;
margin: 0px;
padding: 0px;
    border-right: 1px solid #dfdfdf;
}
ul.mainmenu li.mainmenu4 {
    list-style: none;
    float:left;
margin: 0px;
padding: 0px;
    border-right: 1px solid #dfdfdf;
}
ul.mainmenu li.mainmenu5 {
    list-style: none;
    float:left;
margin: 0px;
padding: 0px;
    border-right: 1px solid #dfdfdf;
}


/*a.menuactive*/

ul.mainmenu li.mainmenu1 a.menuactive {

color: white;

}
ul.mainmenu li.mainmenu2 a.menuactive {

color: white;

}
ul.mainmenu li.mainmenu3 a.menuactive {

color: white;

}
ul.mainmenu li.mainmenu4 a.menuactive {

color: white;

}
ul.mainmenu li.mainmenu5 a.menuactive {

color: white;

}


/*Schriftart Menu*/

ul.mainmenu li.mainmenu1 a {

font-family: Corbel, Arial, Helvetica, sans-serif;
    text-decoration: none;
font-size: 1.2em;
font-weight: bold;
    display: block;
    color: #151616;
    padding: 16px 28px 14px 28px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}
ul.mainmenu li.mainmenu2 a {


font-family: Corbel, Arial, Helvetica, sans-serif;
    text-decoration: none;
font-size: 1.2em;
font-weight: bold;
    display: block;
    color: #151616;
    padding: 16px 28px 14px 28px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}
ul.mainmenu li.mainmenu3 a {

font-family: Corbel, Arial, Helvetica, sans-serif;
    text-decoration: none;
font-size: 1.2em;
font-weight: bold;
    display: block;
    color: #151616;
    padding: 16px 28px 14px 28px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}
ul.mainmenu li.mainmenu4 a {

font-family: Corbel, Arial, Helvetica, sans-serif;
    text-decoration: none;
font-size: 1.2em;
font-weight: bold;
    display: block;
    color: #151616;
    padding: 16px 28px 14px 28px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}
ul.mainmenu li.mainmenu5 a {

font-family: Corbel, Arial, Helvetica, sans-serif;
    text-decoration: none;
font-size: 1.2em;
font-weight: bold;
    display: block;
    color: #151616;
    padding: 16px 28px 14px 28px;

    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background 0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}


/*Hover Menu*/

ul.mainmenu li.mainmenu1:hover > a {
    color: white;
background-color: #ff6100;

}
ul.mainmenu li.mainmenu2:hover > a {
    color: white;
background-color: #5782aa;

}
ul.mainmenu li.mainmenu3:hover > a {
    color: white;
background-color: #95d310;

}
ul.mainmenu li.mainmenu4:hover > a {
    color: white;
background-color: #004C66;;

}
ul.mainmenu li.mainmenu5:hover > a {
    color: white;
background-color: #ff6100;

}



/*Detailmenu*/




ul li ul.detailmenu li.detailmenu:hover > a
{
    color: white;
width: auto;
background-color: #transparent;
}
ul li:hover >  ul
{
    visibility: visible;
}



ul li ul
{
   
    visibility: hidden;
    position: absolute;
    padding:0px;
margin: 0 auto;
list-style: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
   
width: auto;
    color: #151616;
    padding: 2% 5%;
background-color: #95d310;

   
}
ul li ul li
{
float: left;
width:auto;
padding: 0px;
    border-right: 1px solid #dfdfdf;

}











Desweiteren mühe ich mich etwas mit "repsonsive" Design ab, und zwar reicht es bei mir aus irgend einem Grund nicht nur
width bzw max-width anzugeben, sondern muss ich auch noch mühsam die höhe fürs jeweilige Gerät angeben ..  ansonsten sieht es so aus:




Also sollte jemand dafür die Lösung wissen und es nur an einer Kleinigkeit liegt wie die letzten Male - traumhaft!



vG,

an die bar

[stefanbe]

in der template.html erste zeile usesubmenu = 2

lg stefanbe

[andi.ebar]

huift nix ..

nutze MenuCSSCount - kann es damit was zu tun haben?