Danke die Images zu den einzelnen Punkten werden nun im Hauptmenü ausgegeben und im Submenü unterdrückt.
Leider habe ich jetzt noch das Problem, dass mir das Submenü Level2 beim Mouseover immer nur auf der linken Seite angezeigt wird.
Egal welchen der Hauptmenüpunkte ich mit der Maus berühre.
Bin den Code schon durchgegangen, aber ich sehe irgendwie keine relevante Abweichung zum original?
Kann natürlich auch sein, dass ich heute einfach schon viel zu lange über die Sachen drüber schau! 
)
Aber vielleicht kann mir hier ja trotzdem jemand helfen!?!
Dank Euch
Grüße Messen
Code:
/* #mainmenue +++++++++++++++++++++++++++++++++++++++ */
#mainmenue {
overflow:visible;
z-index:999999999999999999999999;
}
#mainmenue {
width:100%;
height:80px;
top:60px;
position:absolute;
padding-top:25px;
}
#mainmenue a, #mainmenue span {
width:100%;
display:block;
padding-bottom:0;
color:#fff;
font:24px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
}
#mainmenue ul {
left:30px;
position:absolute;
list-style-image:url("uploads/datastore/website/viereck.png");
}
#mainmenue li {
min-width:138px;
overflow:visible;
float:left;
margin-right:0;
margin-left:0;
padding-right:5px;
padding-left:5px;
text-align:left;
list-style-type:none;
background-color:transparent;
}
#mainmenue li:hover a, #mainmenue a:hover, #mainmenue .active, #mainmenue .trail a, #mainmenue a:focus {
color:#4b85d8;
}
#mainmenue li:hover ul a {
color:#fff;
}
/* untermenue ein- und ausblenden +++++++++++++++++++++++++++ */
#mainmenue .submenu ul {
top:55px;
position:absolute;
overflow:hidden;
margin-left:-9999px;
left:-10px;
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
#mainmenue li.submenu:hover ul {
position:absolute;
overflow:hidden;
margin-top:0;
margin-left:0;
opacity:0.9;
}
/* ul level_2 +++++++++++++++++++++++++++++++++++++++++ */
#mainmenue .level_2 {
width:25%;
position:absolute;
margin-top:20px;
list-style-image:none;
}
#mainmenue .level_2 li {
width:90%;
margin-right:10px;
margin-left:10px;
text-align:left;
border-right:1px solid #4b85d8;
border-left:1px solid #4b85d8;
background-color:rgba(75,133,216,0.9);
z-index: 99999999999;
}
#mainmenue .level_2 li.first {
padding-top:10px;
border-top:1px solid rgba(75,133,216,0.7);
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
behavior:url('plugins/css3pie/PIE.htc');
}
#mainmenue .level_2 li.last {
padding-bottom:3px;
border-bottom:1px solid rgba(75,133,216,0.7);
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
behavior:url('plugins/css3pie/PIE.htc');
border-bottom-right
}
#mainmenue .level_2 a, #mainmenue .level_2 span.active {
width:90%;
display:block;
margin-right:10px;
margin-left:10px;
padding-top:3px;
padding-bottom:3px;
color:#fff;
text-transform:none;
font:18px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
}
#mainmenue .level_2 a:hover, #mainmenue .level_2 span.active, #mainmenue .level_2 a:focus {
color:#000;
}
/* ueber erstem li kein Rahmen */
#mainmenue .level_2 .first a, #mainmenue .level_2 .first.active .active {
border-top: none;
}
/* unter letztem li kein Rahmen */
#mainmenue .level_2 .last a, #mainmenue .level_2 .last.active .active {
border-bottom: none;
}
Contao CSS3 Navigation mit transition
Zitieren
Zitat von jubel
.
