Салимóненко Дмитрий Александрович
Блок выпадающих комментариев
CSS
<style type="text/css">
в файле dropdown.css
/* 1 уровень */
div.block_with_hid_content > div > div {color: rgb(0, 102, 0); font-size: 0.9em}
/* Надпись "Скрыть пояснение" */
div.block_with_hid_content > div > div.close_inf {margin-left: 3%; padding: 4px; font-size: 0.86em; color: blueviolet}
div.block_with_hid_content > div > div.close_inf > div {display: table-cell; vertical-align: middle; height: 20px;}
/* 2 уровень */
div.block_with_hid_content > div > div div.div_level_2 {margin: 15px 0 10px 3%; border: solid 1px #A3A3A3; display: inline-block; padding: 4px; font-size: 0.96em; background-color: #D9FAF9; color: blueviolet}
/* 3 уровень */
div.block_with_hid_content > div > div div.div_level_2 div.div_level_3 {margin: 15px 0 10px 3%; border: solid 1px #A3A3A3; display: inline-block; padding: 4px; font-size: 0.98em; background-color: #F0EBB6; color: black}
/* 4 уровень */
div.block_with_hid_content > div > div div.div_level_2 div.div_level_3 div.div_level_4 {margin: 15px 0 10px 3%; border: solid 1px #A3A3A3; padding: 4px; font-size: 1em; background-color: #D9FAF9; display: inline-block; color: darkgreen}
</style>
HTML
<p class="dline">Начало_абзаца___<a class="menu_right openmenu" href="#" title="Нажмите, чтобы прочитать комментарий">ссылка</a>.
</p>
<div style="padding: 4px; " class="dline_p interval_12 invisible_p content_inf">
<div style="position: relative"><div class="close_inf"><div>Скрыть пояснение</div></div>
<br/>
<div class="div_level_2">Примечание уровня 2
<br/>
<div class="div_level_3">Примечание уровня 3
<br/>
<div class="div_level_4">Примечание уровня 4</div>
<br/>
Конец примечания 3
</div>
<br/>
Конец примечания 2
</div>
<br/>
Конец примечания 1
</div>
</div>
</div>
</div>
Выглядит следующим образом (наведите указатель мыши):
Начало_абзаца___ссылка.
Начало_абзаца___ссылка. (Многоуровневое)
Конец примечания 3
Конец примечания 2
Конец примечания 1
С уважением.