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>을 사용하면 하나 밖에없는 내포 된 하위 범주를 끝낼 수 없습니다. 양식 요소를 스타일 화하는 기능이 브라우저마다 다르므로 스타일링도 어려울 것입니다.

그러나, 필요에 따라, 다음과 같은 솔루션은 작동 할 수 있습니다 :이를 위해

을 우리가 HTML 목록을 사용하여 select 요소를 다시하고 있습니다. 마크 업이과 같습니다

<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 selector는 div 안에있는 모든 div를 "menu"클래스로 가져옵니다. 그것들은 중첩되어 있으므로 패딩은 자동으로 합산됩니다.

jsfiddle (here)에서 테스트 했으므로 정상적으로 작동합니다.