[529] | 1 | /** |
---|
| 2 | ********************************************* |
---|
| 3 | * Prototype of styles for horizontal CSS-menu |
---|
| 4 | * @data 25.01.2010 |
---|
| 5 | ********************************************* |
---|
| 6 | * (X)HTML-scheme: |
---|
| 7 | * <div id="menu"> |
---|
| 8 | * <ul class="menu"> |
---|
| 9 | * <li><a href="#" class="parent"><span>level 1</span></a> |
---|
| 10 | * <div><ul> |
---|
| 11 | * <li><a href="#" class="parent"><span>level 2</span></a> |
---|
| 12 | * <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div> |
---|
| 13 | * </li> |
---|
| 14 | * </ul></div> |
---|
| 15 | * </li> |
---|
| 16 | * <li class="last"><a href="#"><span>level 1</span></a></li> |
---|
| 17 | * </ul> |
---|
| 18 | * </div> |
---|
| 19 | ********************************************* |
---|
| 20 | */ |
---|
| 21 | |
---|
| 22 | /* menu::base */ |
---|
| 23 | #menu { |
---|
| 24 | position:relative; |
---|
| 25 | z-index:100; |
---|
| 26 | height:32px; |
---|
| 27 | } |
---|
| 28 | #menu .menu { |
---|
| 29 | position:absolute; |
---|
| 30 | } |
---|
| 31 | #menu * { |
---|
| 32 | list-style:none; |
---|
| 33 | border:0; |
---|
| 34 | padding:0; |
---|
| 35 | margin:0; |
---|
| 36 | } |
---|
| 37 | #menu a { |
---|
| 38 | display:block; |
---|
| 39 | padding:7px 14px 7px 14px; |
---|
| 40 | white-space:nowrap; |
---|
| 41 | } |
---|
| 42 | #menu li { |
---|
| 43 | float:left; |
---|
| 44 | background:#fff; |
---|
| 45 | } |
---|
| 46 | #menu li li { |
---|
| 47 | float:none; |
---|
| 48 | _border:1px solid #737373; /** fix for ie6 */ |
---|
| 49 | } |
---|
| 50 | #menu div { |
---|
| 51 | visibility:hidden; |
---|
| 52 | position:absolute; |
---|
| 53 | background:url(images/pix.gif); |
---|
| 54 | } |
---|
| 55 | #menu div div { |
---|
| 56 | margin:-24px 0 0 -1px; |
---|
| 57 | left:100%; |
---|
| 58 | } |
---|
| 59 | #menu li:hover>div { visibility:visible; } |
---|
| 60 | |
---|
| 61 | /* menu::special styles */ |
---|
| 62 | /* menu::level 1 */ |
---|
| 63 | #menu a { |
---|
| 64 | text-decoration:none; |
---|
| 65 | color:#fff; |
---|
| 66 | position:relative; |
---|
| 67 | z-index:77; |
---|
| 68 | } |
---|
| 69 | #menu a:hover { |
---|
| 70 | background:url(images/back.png); |
---|
| 71 | color:#ffa500; |
---|
| 72 | } |
---|
| 73 | #menu a:hover span { color:#ffa500; } |
---|
| 74 | #menu>ul>li:hover>a { |
---|
| 75 | background:url(images/back.png); |
---|
| 76 | color:#ffa500; |
---|
| 77 | } |
---|
| 78 | #menu>ul>li:hover>a span { color:#ffa500; } |
---|
| 79 | #menu span { |
---|
| 80 | text-transform:uppercase; |
---|
| 81 | font:12px/18px 'Trebuchet MS', Arial, Helvetica, Sans-serif; |
---|
| 82 | color:#fff; |
---|
| 83 | } |
---|
| 84 | #menu li { background:none; } |
---|
| 85 | /* menu::level >= 2 */ |
---|
| 86 | #menu li li a { |
---|
| 87 | padding:0; |
---|
| 88 | position:static; |
---|
| 89 | } |
---|
| 90 | #menu li li a:hover { background:#cf8700; } |
---|
| 91 | #menu li li a span { color:#fff; } |
---|
| 92 | #menu li li a:hover span { color:#ffffff; } |
---|
| 93 | #menu li li a.parent span { background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px; } |
---|
| 94 | *+html #menu li li a.parent span { background-position:right 10px; } |
---|
| 95 | #menu li li span { |
---|
| 96 | display:block; |
---|
| 97 | text-transform:none; |
---|
| 98 | line-height:16px; |
---|
| 99 | padding:4px 25px 4px 14px; |
---|
| 100 | font-size:11px; |
---|
| 101 | } |
---|
| 102 | #menu li div { background:url(images/back.png); } |
---|
| 103 | /** <fix for ie6> */ |
---|
| 104 | #menu div div { |
---|
| 105 | _margin-top:-25px; |
---|
| 106 | _background:#393939; |
---|
| 107 | } |
---|
| 108 | #menu li li li { _border:1px solid #393939; } |
---|
| 109 | #menu div div div { _background:#292929; } |
---|
| 110 | #menu li li li li { _border:1px solid #292929; } |
---|
| 111 | /** </fix for ie6> */ |
---|
| 112 | |
---|
| 113 | /* lava lamp */ |
---|
| 114 | div#menu li.back { |
---|
| 115 | width:10px; |
---|
| 116 | height:32px; |
---|
| 117 | z-index:8; |
---|
| 118 | position:absolute; |
---|
| 119 | } |
---|
| 120 | div#menu li.back .left { |
---|
| 121 | width:auto; |
---|
| 122 | height:32px; |
---|
| 123 | float:none; |
---|
| 124 | position:relative; |
---|
| 125 | top:0; |
---|
| 126 | left:0; |
---|
| 127 | visibility:visible; |
---|
| 128 | } |
---|