Ajax Loader
×
HTML 
<div id="left_side">
1
<div id="left_side">
2
 
3
            
4
                  
5
              
6
                                  
7
                    <div class="left_box">
8
9
                        <input type="hidden" id="catid" name="catid" value="">
10
 
11
                        <!--noindex-->
12
                        <ul id="catalog_menu" class="sample-menu">
13
                          
14
                          
15
                            <li>
16
<a id="c1997" href="cats/sale">Акции Распродажи</a>
17
</li>
18
<li class="hover">
19
<a id="c3058" href="cats/3052">Электроника</a>
20
<ul class="hover"><li>
21
<a id="c688" href="cats/Kompiutery-Noutbuki-Planshety">Компьютеры, Ноутбуки, Планшеты</a>
22
</li>
23
<li>
24
<a id="c49" href="cats/49">Мониторы</a>
25
</li>
26
<li>
27
<a id="c1364" href="cats/Portativnaia-elektronika">Портативная электроника</a>
28
</li>
29
<li>
30
<a id="c681" href="cats/Nositeli-informatsii">Носители информации</a>
31
</li>
32
<li>
33
<a id="c689" href="cats/Periferiia-UPS-Ofisnoe-oborudovanie">Периферия и Офисное оборудование</a>
34
</li>
35
<li>
36
<a id="c682" href="cats/Setevoe-oborudovanie-i-modemy">Сетевое оборудование и модемы</a>
37
</li>
38
<li>
39
<a id="c680" href="cats/Komplektuiushchie">Комплектующие</a>
40
</li>
41
<li>
42
<a id="c683" href="cats/Foto-Video-Televizory-Elektronika">Фото-, Видео-, Телевизоры</a>
43
</li>
44
<li>
45
<a id="c691" href="cats/Servery-i-Sistemy-khraneniia-dannykh">Серверы и Системы хранения данных</a>
46
</li>
47
<li>
48
<a id="c684" href="cats/Web-kamery-Kolonki-Naushniki-Mikrofony">Web-камеры, Колонки, Наушники, Микрофоны</a>
49
</li>
50
<li>
51
<a id="c686" href="cats/Klaviatury-Myshki-Manipuliatory">Клавиатуры, Мышки, Манипуляторы</a>
52
</li>
53
<li>
54
<a id="c687" href="cats/Aksessuary">Аксессуары</a>
55
</li>
56
<li>
57
<a id="c3257" href="cats/3257">3D Принтеры </a>
58
</li>
59
</ul>
60
</li>
61
<li>
62
<a id="c3059" class="select" href="cats/3053">Бытовая техника</a>
63
<ul class="no_hover"><li>
64
<a id="c2361" href="cats/2361">Мелкая бытовая техника</a>
65
</li>
66
<li>
67
<a id="c1363" href="cats/Bytovaia-tekhnika">Крупная бытовая техника</a>
68
</li>
69
<li>
70
<a id="c2203" href="cats/2203">Электроинструмент</a>
71
</li>
72
<li>
73
<a id="c2204" href="cats/2204">Ручной инструмент</a>
74
</li>
75
<li>
76
<a id="c2205" href="cats/2205">Садовая техника и бензоинструмент</a>
77
</li>
78
<li>
79
<a id="c2902" href="cats/2902">Расходные материалы для техники</a>
80
</li>
81
<li>
82
<a id="c2206" href="cats/2206">Электротехнические изделия</a>
83
</li>
84
</ul>
85
</li>
86
<li class="hover">
87
<a id="c690" href="cats/Raskhodnye-materialy">Расходные материалы</a>
88
<ul class="hover"><li>
89
<a id="c28" href="cats/28">Бумага, фотобумага и чистящие средства</a>
90
</li>
91
<li>
92
<a id="c27" href="cats/27">Клейкая лента упаковочная, скотч</a>
93
</li>
94
<li>
95
<a id="c24" href="cats/24">Расходные материалы HP</a>
96
</li>
97
<li>
98
<a id="c1053" href="cats/1053">Расходные материалы Canon, Epson, Xerox, Samsung</a>
99
</li>
100
<li>
101
<a id="c922" href="cats/922">Расходные материалы Brother, Toshiba, Kyocera Mita, Ricoh, Sharp, Panasonic, Lexmark</a>
102
</li>
103
<li>
104
<a id="c1146" href="cats/1146">Совместимые картриджи для Brother, Xerox, Canon, HP, Epson, Samsung</a>
105
</li>
106
<li>
107
<a id="c979" href="cats/979">Чипы, барабаны, тонеры, запчасти</a>
108
</li>
109
<li>
110
<a id="c3339" href="cats/3339">Широкоформатная бумага</a>
111
</li>
112
<li>
113
<a id="c3343" href="cats/3343">Фотобумага</a>
114
</li>
115
<li>
116
<a id="c3340" href="cats/3340">Термобумага для факсов</a>
117
</li>
118
<li>
119
<a id="c1054" href="cats/1054">TallyGenicom, Dymo LetraTag, KONICA MINOLTA</a>
120
</li>
121
<li>
122
<a id="c3334" href="cats/3334">Бумага офисная</a>
123
</li>
124
<li>
125
<a id="c3341" href="cats/3341">Бумага для цветной печати</a>
126
</li>
127
<li>
128
<a id="c2294" href="cats/2294">Разные удаленные разделы</a>
129
</li>
130
</ul>
131
</li>
132
<li class="hover">
133
<a id="c685" href="cats/Programmnoe-obespechenie">Программное обеспечение</a>
134
<ul class="hover"><li>
135
<a id="c14" href="cats/14">Защита и Антивирусы</a>
136
</li>
137
<li>
138
<a id="c54" href="cats/54">Операционные системы</a>
139
</li>
140
<li>
141
<a id="c17" href="cats/17">Игры, Энциклопедии, Обучалки</a>
142
</li>
143
<li>
144
<a id="c3060" href="cats/3054">1с, Архиваторы, Графика</a>
145
</li>
146
</ul>
147
</li>
148
<li class="hover">
149
<a id="c2362" href="cats/2362">Офисная мебель, сейфы, шкафы</a>
150
<ul class="hover"><li>
151
<a id="c75" href="cats/75">Мебель для компьютеров</a>
152
</li>
153
<li>
154
<a id="c2233" href="cats/2233">Сейфы</a>
155
</li>
156
<li>
157
<a id="c2259" href="cats/2259">Шкафы ПРАКТИК</a>
158
</li>
159
<li>
160
<a id="c2344" href="cats/2344">Кэшбоксы, ключницы</a>
161
</li>
162
</ul>
163
</li>
164
<li>
165
<a id="c3633" href="cats/3633">Бытовая техника</a>
166
</li>
167
 
168
                        </ul>
169
                        <!--/noindex-->
170
 
171
                    </div>
172
                  
173
              
174
                
175
 
176
 
177
            </div>
 
CSS 
/* DEFAULT */
1
/* DEFAULT */
2
*{ margin:0; padding:0; }
3
img{ border:0; -ms-interpolation-mode:bicubic; max-width:100%; }
4
html, body{ height:100%; /* min-height: 100%; font-size: 100%; */ }
5
body{ color:#000; text-align:left; background:#FFF; /*font-family: tahoma; */ font-size:13px; font-weight:normal; line-height:1.4em; }
6
td{ vertical-align:top; }
7
*:focus{ outline:none }
8
.clear{ clear:both; }
9
.b-properties__title{ font-size:1.7em; line-height:1.5em; }
10
 
11
 
12
/* Левая часть страницы */
13
#left_side{
14
  float:left;
15
  width:300px;
16
  background: #f4f4f4;
17
  /* margin-left: 3px; */
18
}
19
 
20
 
21
 
22
ul#catalog_menu li span{
23
  background:#D1FFB5;
24
  font-weight:bold;
25
  position:absolute;
26
  top:2px;
27
  right:-10px;
28
  padding:2px 4px;
29
}
30
ul#catalog_menu a.collapsed{ background:url('../js/collapsed.gif') left 9px no-repeat; }
31
ul#catalog_menu a.expanded{ background:url('../js/expanded.gif') left 9px no-repeat; }
32
ul#catalog_menu a.select{ font-weight:bold; }
33
/* Верхний уровень вложенности меню каталога */
34
ul#catalog_menu{ list-style:none; padding-bottom:10px; }
35
ul#catalog_menu li{ /* Элемент списка */ font-family:"Trebuchet MS"; color:#000; /*border: 1px dashed #eee;*/ padding:0; position:relative; }
36
ul#catalog_menu li:nth-child(2n){ /* Элемент списка */ background:#F5F8FF; }
37
ul#catalog_menu li a{
38
  /* Ссылка */
39
  font-family:"Trebuchet MS";
40
  display:block;
41
  /*border: 1px dashed gray;*/
42
  font-size:1.2em;
43
  padding:5px 12px;
44
}
45
/* Внутренний уровень вложенности меню каталога */
46
ul#catalog_menu ul{
47
  list-style:none;
48
  display:none;
49
  position:absolute;
50
  top:0px;
51
  left: 300px;
52
  width:300px;
53
  background:#FFF;
54
  z-index:111;
55
  border:2px solid #90CEFF;
56
}
57
ul#catalog_menu ul.no_hover{
58
  display:inherit;
59
  position:static;
60
  border:none;
61
  margin-left:20px;
62
  background:none;
63
  width:inherit;
64
  border-left:2px dashed #DBE1FF;
65
}
66
ul#catalog_menu ul.no_hover > li{ background:none; }
67
ul#catalog_menu li:hover > UL{ /* Элемент списка */ display:block; }
68
ul#catalog_menu li.hover:hover:before{
69
  position:absolute;
70
  top:50%;
71
  right:0px;
72
  z-index:9999;
73
  content:'';
74
  border-top:10px solid rgba(0, 0, 0, 0);
75
  border-bottom:10px solid rgba(0, 0, 0, 0);
76
  border-right:10px solid #B2CBFF;
77
  margin-top:-9px;
78
}
79
ul#catalog_menu li.hover:hover:after{
80
  position:absolute;
81
  top:50%;
82
  right:-3px;
83
  z-index:88999;
84
  content:'';
85
  border-top:10px solid rgba(0, 0, 0, 0);
86
  border-bottom:10px solid rgba(0, 0, 0, 0);
87
  border-right:10px solid #FFFFFF;
88
  margin-top:-9px;
89
}
 

cat111111

CSSDeck G+