/** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 25.01.2010 ********************************************* * (X)HTML-scheme: *
********************************************* */ /** Selectors **/ /* Reset */ #menu * { margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } div#menu { position:relative;} #menu ul.menu { white-space: nowrap; } /* Geometrical arrangement */ #menu ul.menu li { display: inline-block; height: 46px; position: relative; } #menu ul.menu li div { position: absolute; top: 46px; left: 0px; } #menu ul.menu li div div { position: absolute; top: -6px; left: 188px; } /* Escaping style for lower levels */ #menu ul.menu li div ul li { display: block; float: none; width: auto; height: auto; } /** Graphics **/ /* Horizontal sliding doors */ #menu ul.menu li a { padding-left: 14px; background-image: url("images/item1.png"); background-repeat: no-repeat; background-position: left -1000px; display: inline-block; margin: 10px 2px; } #menu ul.menu li a span { padding-right: 14px; padding-left: 0px; background-image: url("images/item1.png"); background-repeat: no-repeat; background-position: right -1000px; display: inline-block; height: 27px; line-height: 27px; cursor: pointer; } #menu ul.menu li:hover a { background-position: left -54px; } #menu ul.menu li:hover a span { background-position: right -81px; } #menu ul.menu li.active a { background-position: left 0px; } #menu ul.menu li.active a span { color: #EB2E83; background-position: right -27px; } /* Escape Horizontal doors */ #menu ul.menu li div ul li a { display: block; padding: 0px; margin: 0px; background: none; } #menu ul.menu li div ul li a span { display: block; padding: 0px; background: none; height: auto; width: 165px; line-height: 25px; padding: 7px 0 7px 9px; white-space: normal; } /* Vertical sliding doors */ #menu ul.menu li div { width: 200px; padding-top: 6px; background-image: url("images/submenu-top.png"); background-repeat: no-repeat; background-position: 0px top; } #menu ul.menu li div ul { padding: 6px 6px 9px 6px; padding-top: 0; background-image: url("images/submenu-bottom.png"); background-repeat: no-repeat; background-position: 0px bottom; } /* Hover Effect on Submenus */ #menu ul.menu ul li:hover { } #menu ul.menu li.active ul li a span { color: #5E5E5E; width: 165px;} #menu ul.menu li.active ul li a span:hover { color:#EB2E83;} #menu ul.menu ul li a span:hover { color:#EB2E83; } /* Main header line */ #menu { height: 46px; padding-left: 14px; background:transparent url(images/bg_full_200.png) no-repeat 0 0; } /* Text shadow */ #menu span { color: #24CCF7; } #menu li:hover>a>span { color: #EB2E83; } /* Fonts */ #menu ul.menu li a span { font-family: Arial; font-size: 13px; font-weight: 600; } #menu ul.menu li div ul li a span { color:#5E5E5E; font-family: Trebuchet MS; font-size: 12px; font-weight: 400; } /* Lines between li */ #menu ul.menu li div ul { padding-bottom: 8px; } #menu ul.menu li div ul li:first-child { border-top-width: 0px; } /* Menu logic */ #menu li>div { visibility: hidden; } #menu li:hover>div { visibility: visible; } /* */ /* Hover Effect on Submenus */ #menu ul.menu ul li:hover { background-color: #fff; } /* Lines between li */ #menu ul.menu li div ul li { background-image:url(images/hr.gif); background-repeat: repeat-x; background-position: left bottom; } #menu ul.menu ul a.parent { background: url(images/arrow.gif) no-repeat right center; margin-right: -1px; } /* ie7 */ #menu ul.menu li { *zoom: 1; *display: inline; } #menu ul.menu li a { *zoom: 1; *display: inline; } #menu ul.menu li a span { *zoom: 1; *display: inline; } /* IE6 */ #menu ul.menu li a { _background-image: url("images/item.gif"); } #menu ul.menu li a span { _background-image: url("images/item.gif"); } #menu ul.menu li div { _background-image: url("images/submenu-top.gif"); } #menu ul.menu li div ul { _background-image: url("images/submenu-bottom.gif"); } #menu ul.menu li a:hover { _background-position: left -54px; } #menu ul.menu li a:hover span { _background-position: right -81px; _color: #EB2E83; } #menu ul.menu li li a:hover span { _color:#EB2E83; } /* Menu logic for IE6 */ #menu div { _display: none; } #menu div li:hover div { _visibility: visible;_display: block; } #menu div li:hover li:hover div { _display: block; } #menu div li:hover li:hover li:hover div { _display: block; } /* */