How to indent text in a select drop down menu using PHP & CSS? [REPHRASED]

Tags: php,mysql,css,xhtml

Problem :

I asked a similar question earlier but I'll ask it again in a different way. How can I indent categories and endless sub categories that I have in a select drop down menu using PHP & CSS?

Here is my PHP code.

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

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


Here is the output.

   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

The numbers are just there to see the categories and sub categories easier.

Solution :

In the past I've done this by prepending &nbsp; to the content of each nested option.

$spacer = '&nbsp;&nbsp;';

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';


Where $depth represents the 'steps' an option should be indented.

The way I accomplished this was to first put my options into a multidimensional array where children are stored as an array of their parent's...

Like this:

     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'

Then I run through the array with a recursive function that steps into each nested array (if present) and appends the $padding to the 'name' value, wraps the option tags around it then returns it. The returned string is appended to the return from all previous calls, and you're left with an indented option menu. Magic.

    CSS Howto..

    How do I create a radial css3 border gradient shadow

    How can I align centered inline-block elements correctly?

    How to set relative url for a css file in Django

    How to get the text in the custom dialog to be centered vertically

    How to get all CSS of element

    How to add spacing between checkboxlist items?

    How to implement color through css from dark to light? [closed]

    CSS column header with img - how to dock img/div to the right?

    How can I use this php empty function to properly display CSS?

    How to make div size bigger?

    How to show a title in the border of a div [duplicate]

    how can the value of an href attribute be changed using javascript/css?

    How to change the css style with a html inline link

    How to access regular CSS from GWT widget?

    How to select a group of elements after every nth-element in CSS?

    How to combine grouped inputs with aligned forms?

    How can I use webpack to copy files to the distribution folder?

    How I do edit the css for just the home page on Magento?

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    How to remove some css properties without the paticular one using regular expression?

    how to trigger a css animation after certain pixels of scroll

    css nested classes, how to not repeat code?

    Odd visual effect (little line shows) when hovering over button in browser

    how to make an empty span collapse

    How can I make the CSS-hover animation to stay?

    How to use “currentColor” CSS 3 keyword in LESS?

    How can I avoid using too many classes in CSS?

    How do I get my menu to drop down? CSS & HTML

    How to change color of caret when drop down button is hovered

    How to make an element with background image appear using css animation/javascript