Как сделать отступ текста в выпадающем меню выбора, используя PHP и CSS?[Перефразировать]

Question

Я задавал подобный вопрос ранее, но я задам его снова по-другому.Как сделать отступ для категорий и бесконечных подкатегорий в выпадающем меню выбора с использованием PHP и CSS?

Вот мой код PHP.

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $category . '</option>\n';

}  

Вот вывод.

   1. Apple
   2. Arts & Entertainment
         1. Amusement
         2. Art
         3. Artists
               1. A
                     1. a1
                     2. a2
               2. B
               3. C
               4. D
   3. Automotive
   4. Network
   5. Server
   6. Web Design
         1. CSS
         2. HTML

Цифры просто для упрощения просмотра категорий и подкатегорий.

Answer 1

Раньше я делал это, добавляя   к содержимому каждого вложенного параметра.

$spacer = '  ';

while (list($id, $parent_id, $category) = mysqli_fetch_array($r, MYSQLI_NUM)) {

    $padding = str_repeat($spacer, $depth);

    // Add to the select menu:
    echo '<option value="' . $id . '">' . $padding . $category . '</option>\n';

}  

Где $depth представляет собой "шаги", параметр должен иметь отступ.

Способ, которым я достиг этого, состоял в том, чтобы сначала поместить мои параметры в многомерный массив, где дочерние элементы хранятся в виде массива родительских элементов ...

Как это:

Array( 
     1 => Array( 
          'name' => 'Apple'
          ),
     2 => 'Arts & Entertainment',
          'children' => Array(
               1 => Array(
                    'name' => 'Amusement'
                    ),
               2 => Array(
                    'name' => 'Art'
                    ),
               3 => Array(
                    'name' => 'Artists'
                    'children' => Array(
                         1 => Array(
                              'name' => 'A',
                              'children' => Array(
                                   1 => Array(
                                         'name' => 'a1'
                                    )
                              )
                         )
                    )
               )
          )
     )
 )

Затем я пробегаю массив с помощью рекурсивной функции, которая входит в каждый вложенный массив (если есть) и добавляет $padding к значению 'name', оборачивает теги параметров вокруг него и возвращает его.Возвращенная строка добавляется к возврату всех предыдущих вызовов, и у вас остается меню с отступом.Магия.