Antwort #11 am: 04. Dezember 2012, 14:41:31
Hallo,
erst einmal Danke für die Bewertungen.
hier das Menü für alle die Interesse haben daran, aber wie gesagt es ist ein normales CSS Menü
<div id="topmenuwrap">
<div class="navi">
<ul class="level-1b">
<!--öle -->
<li class="level-1b">
<a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152', 'NONSSL');{/php}">Öle</a>
<ul class="italmenu-cat2 navi-1-cols">
<li class="italmenu-cat2"><a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_153', 'NONSSL');{/php}">Italienisches Olivenöl</a></li>
<li class="italmenu-cat2"><a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_154', 'NONSSL');{/php}">Französisches Olivenöl</a></li>
<li class="italmenu-cat2"><a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_158', 'NONSSL');{/php}">Portugisisches Olivenöl</a></li>
<li class="italmenu-cat2"><a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_157', 'NONSSL');{/php}">Spanisches Olivenöl</a></li>
<li class="italmenu-cat2"><a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_159', 'NONSSL');{/php}">Aromatisierte Öle</a></li>
<li class="italmenu-cat2 last"> <a href="{php}echo xtc_href_link(FILENAME_DEFAULT, '?cPath=152_160', 'NONSSL');{/php}">Nussöle - Kernöle</a></li>
</ul>
</li>
</ul>
</div>
</div>
und hier der CSS Teil
/* TOPMENU AS LIST */
#topmenuwrap{
background: #333 url(img/bg_topmenu.gif) repeat-x;
}
#topmenu {
float:left;
padding:0;
margin:0;
list-style-type:none;
height:36px;
font-size:13px;
background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu li {
height:36px;
float:left;
padding: 0px 25px;
margin:0;
background: url(img/bg_topmenu_breakline.gif) no-repeat;
background-position:right;
}
#topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
line-height:36px;
vertical-align:middle;
text-decoration:none;
outline: none;
font-weight:bold;
cursor:pointer;
color:#fff;
margin:0;
padding:0;
}
#topmenu a:hover {
color:#ccc;
}
.navi{margin-bottom:1px; margin-bottom: 5Px;}
.navi ul{cursor:auto}
.navi li{cursor:pointer}
.navi ul.level-1 li.level-1{display:-moz-inline-box;display:inline-block;padding:4px 15px 4px 15px;border-right:1px solid #f2f2f2;border-left:1px solid #ccc;vertical-align:top;color:#4c4c4c;font-size:12px}
.navi ul.level-1 a{line-height:1em;text-decoration:none}
.navi ul.level-1 li.level-1.over,.navi ul.level-1 li.level-1:hover{background:#fff}
.navi ul.level-1 li.navi-item-search{padding:0;border:none}
.navi ul.level-1 li.navi-item-search div.search-wrapper{position:absolute;top:1px;left:2px}
.navi ul.level-1 li.last{border-right:none}
.navi ul.level-1 li.navi-item-collection{background:#333 !important;color:#fff;border-left:none;border-right:none;border-bottom:1px solid #333 !important}
.navi ul.level-1b{
background: #868686 url(img/bg_boxheader.gif);
/*Hintergrung navi */
color:#fff;
-khtml-border-radius:3px 3px 0 0;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
font-size:0;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
} /*level1 haupt*/
.navi ul.level-1b li.level-1b{display:-moz-inline-box;display:inline-block;padding:5px 13px;border-left:1px solid #dcdcdc;border-right:1px solid #4d4d4d;color:#fff;position:relative;font-weight:700;font-size:12px}
.navi ul.level-1b li.level-1b.active,.navi ul.level-1b li.level-1b.over,.navi ul.level-1b li.level-1b:hover{background:#fff;color:#333;background-color:#e6e6e6;background:-webkit-gradient(linear,left top, left bottom, color-stop(0, #e6e6e6),color-stop(1, #fff));background:-webkit-linear-gradient(top, #e6e6e6 0,#fff 100%);background:-moz-linear-gradient(top, #e6e6e6 0,#fff 100%);background:-o-linear-gradient(top, #e6e6e6 0,#fff 100%);background:-ms-linear-gradient(top, #e6e6e6 0,#fff 100%);background:linear-gradient(top, #e6e6e6 0,#fff 100%);xfilter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#ffe6e6e6', endColorStr='#ffffffff');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#ffe6e6e6', endColorStr='#ffffffff')"}
.navi ul.level-1b li.level-1b>a{color:#fff} /* schrift level 1} */
.navi ul.level-1b li.level-1b.active a,.navi ul.level-1b li.level-1b.over a,.navi ul.level-1b li.level-1b:hover a{color:#333;text-decoration:none} /* schrift level 2 */
.navi .navi-item-furniture-categories{border-left:none !important;-khtml-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-moz-border-radius:2px 0 0 0;border-radius:2px 0 0 0;-webkit-border-top-left-radius:2px;-moz-border-radius-topleft:2px}
.navi ul.level-2{display:none;position:absolute;text-align:left;left:1px;top:100%;z-index:1001}
.navi ul.level-2 li.level-2{position:absolute;top:100%;left:-1px;padding:20px;background:#fff;min-height:2em;width:917px;border:1px solid #ccc;border-top:none}
.navi ul.level-2 li.level-2 div b{font-family:'Century Gothic',sans-serif}
.navi ul.level-2 li.level-2 div p{font-family:Tahoma,Arial,sans-serif;font-weight:300}
.navi ul.level-2 li.level-2.other{padding:0;width:957px;height:156px}
.navi ul.level-2 li.level-2.other .left{margin-top:20px}
.navi ul.level-2 li.level-2 .service{margin:0 20px}
.navi ul.level-2 li.level-2 .service div.left{width:423px}
.navi ul.level-2 li.level-2 .service div.right{width:407px}
.navi ul.level-2 li.level-2 .about-us{margin:0 0 0 20px}
.navi ul.level-2 li.level-2 .about-us div.left{width:421px}
.navi ul.level-2 li.level-2 .about-us div.right{width:516px}
.navi ul.level-1 li.level-1.over ul.level-2,.navi ul.level-1 li.level-1:hover ul.level-2{display:block}
.navi ul.level-2 li.navi-item-determine-product-range{background-position:right bottom;background-repeat:no-repeat}
.navi ul.level-2 li.navi-item-reviews{overflow:hidden}
.navi ul.level-2 li.navi-item-reviews img{margin-left:12px}
.navi ul.italmenu-cat2{position:absolute;left:-1px;top:100%;background:#fff;border:1px solid #ccc;border-top:none;padding:10px;display:none;z-index:1001;font-weight:400} /* level 2 */
.navi ul.italmenu-cat2 li.italmenu-cat2{display:block;width:240px;xpadding:5px;xline-height:22px;border-bottom:1px solid #ccc;font-size:12px;}
.navi ul.italmenu-cat2 li.italmenu-cat2.last{border-bottom:none;}
.navi ul.italmenu-cat2 li.italmenu-cat2.over,.navi ul.italmenu-cat2 li.italmenu-cat2:hover{background:#e5e5e5;color:#fff} /* hintergrund hoover level 2*/
.navi ul.italmenu-cat2 li.italmenu-cat2.over a,.navi ul.italmenu-cat2 li.italmenu-cat2:hover a{color:#fff}
.navi ul.italmenu-cat2 li.italmenu-cat2.over .category-icon,.navi ul.italmenu-cat2 li.italmenu-cat2:hover .category-icon{background-image:url(img/category-icons-invers.png)}
.navi ul.italmenu-cat2 a{color:#4c4c4c;display:block;height:22px;line-height:22px;padding:5px}
.navi ul.level-1b li.level-1b.over ul.italmenu-cat2,.navi ul.level-1b li.level-1b:hover ul.italmenu-cat2{display:block}
.navi ul.navi-1-cols{width:240px;}
.navi ul.navi-2-cols{width:500px}
.navi ul.navi-3-cols{width:750px}
.navi ul.navi-1-cols > li,.navi ul.navi-2-cols > li,.navi ul.navi-3-cols>li{margin-right:10px}
hoffe Ihr Könnt was damit anfangen oder es gebrauchen
LG Johnny