Салимóненко Дмитрий Александрович

Техническая страница сайта

Блок выпадающих комментариев

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>


<div class="block_with_hid_content">
   <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>
        <div>_Примечание уровня 1
            <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>

Выглядит следующим образом (наведите указатель мыши):

Начало_абзаца___ссылка.

Скрыть пояснение
__Примечание уровня 1

Начало_абзаца___ссылка. (Многоуровневое)

Скрыть пояснение
__Примечание уровня 1
Примечание уровня 2
Примечание уровня 3
Примечание уровня 4

Конец примечания 3

Конец примечания 2

Конец примечания 1

С уважением.