Как сделать отступ для текста в выпадающем меню выбора с помощью CSS

Question

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

   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

Вы не можете сделать это с элементом <select>.Вы не можете иметь бесконечную вложенную подкатегорию, как вы предлагаете, только одну, с <optgroup>.Стилизация также будет затруднена, так как возможность стилизовать элементы формы различается в разных браузерах.

Однако, в зависимости от ваших потребностей, может работать следующее решение:

Для этого мы воссоздаем элемент select, используя списки HTML.Разметка будет выглядеть следующим образом:

<div id="select">
    <p>Select your Answer</p>
    <ul>
        <li><a href="#">Apple</a></li>
        <li><a href="#">Arts and Entertainment</a>
            <ul>
                <li><a href="#">Amusement</a></li>
                <li><a href="#">Art</a></li>
                <li><a href="#">Artist</a>
                    <ul>
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                    </ul></li>
            </ul>
        </li>
    </ul>
</div>

Затем, с помощью CSS, создайте стиль так, чтобы он соответствовал вашей цели:

#select {
    border: 1px solid #999;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 300px;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

#select:hover {
    background-color: #efefef;
}

#select > ul {
    display: none;
    list-style: none;
}

#select:hover > ul {
    display: block;
}

#select > ul ul {
    margin-left: 20px;
}

#select > ul a, #select > p {
    display: block;
    padding: 3px 8px 4px;
    color: #333;
    text-decoration: none;
}

#select > ul a:hover {
    background-color: #ddd;
}

Поиграйте с ним здесь: http://jsfiddle.net/thHFS/

Answer 2

Если вы используете элементы (теги) для монтирования раскрывающейся структуры, вы можете сделать это:

HTML

<div class="menu">
    <div>
        1. Apple
    </div>
    <div>
        2. Arts
        <div>2.1 Foo</div>
        <div>2.2 Bar</div>
    </div>
    <div>
        3. Auto
    </div>
</div>

CSS

.menu div {
    padding-left: 30px;
}

Селектор .menu div принимает все div внутри div с классом "menu". Они вложенные, поэтому отступы суммируются автоматически.

Я тестировал в jsfiddle ( здесь ) и работает нормально.