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 | } |
---|