/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/pro_drop_2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /********************************************************************* Hier müsst ihr die Höhe und die Breite eurer Reiter eingeben. Dies sind zB MainNavigation, ClanNavigation usw usw *********************************************************************/ #nav { height:37px; } #nav li.top { height:37px; width:125px; } #nav li a.top_link { height:37px; line-height:28px; width:125px; } #nav li a.top_link span { height:37px; width:125px; } #nav li a.top_link span.down { height:37px; width:125px; } #navuser { height:24px; } #navuser li.top { height:24px; width:125px; } #navuser li a.top_link { height:24px; line-height:28px; width:125px; } #navuser li a.top_link span { height:24px; width:125px; } #navuser li a.top_link span.down { height:24px; width:125px; } /********************************************************************* Hier müsst ihr die gewünschte Breite des sich öffnenden Dropdowns angeben. In den meisten Fällen ist die genauso breit wie auch die Reiter. *********************************************************************/ #nav li:hover ul.sub { top:37px; width:125px; } #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul { width:125px; } #navuser li:hover ul.sub { top:24px; width:125px; } #navuser li:hover li:hover ul, #navuser li:hover li:hover li:hover ul, #navuser li:hover li:hover li:hover li:hover ul, #navuser li:hover li:hover li:hover li:hover li:hover ul { width:125px; } /********************************************************************* Hover Effekte Hier definiert ihr die Farben die sich beim Mouseover ergeben. Die erste Klasse ist jeweils der standart und die zweite ist das Mouseover *********************************************************************/ /********************************************************************* Reiter *********************************************************************/ #nav li a.top_link { color: #FFF; background-color:#333 } #nav li:hover a.top_link {color: #F00; background-color:#009} #nav li a.top_link_main { background:url(../images/main/main.jpg); width:125px; height:37px; display:block } #nav li:hover a.top_link_main { background:url(../images/main/main_active.jpg); height:40px; margin-top:-3px} #nav li a.top_link_clan { background:url(../images/main/clan.jpg); width:125px; height:37px; display:block; margin-left:1px } #nav li:hover a.top_link_clan { background:url(../images/main/clan_active.jpg); height:40px; margin-top:-3px} #nav li a.top_link_com { background:url(../images/main/com.jpg); width:125px; height:37px; display:block; margin-left:2px } #nav li:hover a.top_link_com { background:url(../images/main/com_active.jpg); height:40px; margin-top:-3px} #nav li a.top_link_misc { background:url(../images/main/misc.jpg); width:125px; height:37px; display:block; margin-left:3px } #nav li:hover a.top_link_misc { background:url(../images/main/misc_active.jpg); height:40px; margin-top:-3px} #navuser li a.top_link_user { background:url(../images/main/usermenumore.jpg); width:51px; height:24px; display:block} #navuser li:hover a.top_link_user { background:url(../images/main/usermenumore_hover.jpg)} /********************************************************************* Dropdown Navipunkte *********************************************************************/ #nav li:hover ul.sub li a { color: #FFF; background:url(../images/main/navi_bg.png); width:121px; height:20px; display:inline-block; margin-left:2px; margin-top:1px; margin-bottom:1px;} #nav li:hover ul.sub li a:hover { color: #1ab3ff;} #navuser li:hover ul.sub li a { color: #FFF; background:url(../images/main/navi_bg.png); width:121px; height:20px; display:inline-block; margin-left:2px; margin-top:1px; margin-bottom:1px;} #navuser li:hover ul.sub li a:hover { color: #1ab3ff;} /********************************************************************* Hintergrund und Rahmen des Dropdowns Hier könnt ihr die Hintergrundfarbe und die Farbe bzw dicke res Rahmens bestimmen. *********************************************************************/ #nav li:hover ul.sub { background:url(../images/main/dropdownbg.png) } #navuser li:hover ul.sub { background:url(../images/main/dropdownbg.png) } /********************************************************************* Ab hier nichts mehr ändern *********************************************************************/ #nav {padding:0; margin:0; list-style:none; position:relative; z-index:5; font-family:arial, verdana, sans-serif;} #nav li.top {display:block; float:left;} #nav li a.top_link {display:block; float:left; text-decoration:none; font-size:10px; font-weight:bold; padding:0 0 0 0px; cursor:pointer; text-align:center} #nav li a.top_link span {float:left; display:block; padding:0 0px 0 0px; text-align:center;} #nav li a.top_link span.down {float:left; display:block; padding:0 0px 0 0px; background: no-repeat right top; text-align:center;} /* Default list styling */ #nav li:hover {position:relative; z-index:2;} #nav li:hover ul.sub {left:1px; padding:0px; white-space:nowrap; height:auto; z-index:3;} #nav li:hover ul.sub li {display:block; height:20px; position:relative; float:left; width:120px; font-weight:normal;} #nav li:hover ul.sub li a {display:block; font-size:10px; height:18px; width:113px; line-height:18px; text-indent:5px; text-decoration:none;border:0px solid #bbd37e;} #nav li:hover ul.sub li a:hover {border-color:#fff;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:120px; top:-4px; background: #000; padding:3px; border:1px solid #FFF; white-space:nowrap; width:130px; z-index:4; height:auto;} #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly { color:#fff; border-color:#fff;} #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly { color:#000; border-color:#bbd37e;} #navuser {padding:0; margin:0; list-style:none; position:relative; z-index:5; font-family:arial, verdana, sans-serif;} #navuser li.top {display:block; float:left;} #navuser li a.top_link {display:block; float:left; text-decoration:none; font-size:10px; font-weight:bold; padding:0 0 0 0px; cursor:pointer; text-align:center} #navuser li a.top_link span {float:left; display:block; padding:0 0px 0 0px; text-align:center;} #navuser li a.top_link span.down {float:left; display:block; padding:0 0px 0 0px; background: no-repeat right top; text-align:center;} /* Default list styling */ #navuser li:hover {position:relative; z-index:2;} #navuser li:hover ul.sub {left:1px; padding:0px; white-space:nowrap; height:auto; z-index:3;} #navuser li:hover ul.sub li {display:block; height:20px; position:relative; float:left; width:120px; font-weight:normal;} #navuser li:hover ul.sub li a {display:block; font-size:10px; height:18px; width:113px; line-height:18px; text-indent:5px; text-decoration:none;border:0px solid #bbd37e;} #navuser li:hover ul.sub li a:hover {border-color:#fff;} #navuser li:hover li:hover ul, #navuser li:hover li:hover li:hover ul, #navuser li:hover li:hover li:hover li:hover ul, #navuser li:hover li:hover li:hover li:hover li:hover ul {left:120px; top:-4px; background: #000; padding:3px; border:1px solid #FFF; white-space:nowrap; width:130px; z-index:4; height:auto;} #navuser ul, #navuser li:hover ul ul, #navuser li:hover li:hover ul ul, #navuser li:hover li:hover li:hover ul ul, #navuser li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #navuser li:hover li:hover a.fly, #navuser li:hover li:hover li:hover a.fly, #navuser li:hover li:hover li:hover li:hover a.fly, #navuser li:hover li:hover li:hover li:hover li:hover a.fly { color:#fff; border-color:#fff;} #navuser li:hover li:hover li a.fly, #navuser li:hover li:hover li:hover li a.fly, #navuser li:hover li:hover li:hover li:hover li a.fly { color:#000; border-color:#bbd37e;}