CSS 드롭 다운 메뉴

Question

나는 드롭 다운 메뉴의 스타일을 지정하고 몇 가지 질문을하고 있습니다.

당신은 여기에 드롭 다운 볼 수 있습니다 http://jsfiddle.net/tomperkins/3M7Cb/

내 질문은 : 나는 에있는 아래쪽 화살표를 얻을 수있는 방법

1. 각 상위 항목 (I 이 교체하려 할 때에 나타납니다 배경 속성).

2. 텍스트 자체 만 클릭하면 전체 자식 영역을 클릭 할 수 있습니까?

언제나처럼 모든 것이 도움이됩니다.

ul li.top:after { 
content: "▼"; 
} 

전체 li 클릭을 만들려면 : 사전에

감사합니다, 아래쪽 화살표를 들어

톰 퍼킨스

Answer 1

, 내 성향은 이미지가 아닌 텍스트 개체를 사용하는 것입니다 :

ul li a { 
    display: block; 
    /* other stuff */ 
} 

JS Fiddle demo of both suggestions.

---

아래쪽 화살표의 호버 스타일 조정을 편집 : 2>는 <a> 태그가 차지 블록으로 렌더링 할 필요가

ul li.top:after { 
    color: #000; 
    content: "▼"; 
    float: right; 
} 

ul:hover li.top:after { 
    color: #ccc; 
} 

JS Fiddle demo

Answer 2

질문을 드롭 다운 항목의 영역. 특수한 도구를 사용하여이 메뉴를 작성하고 있으므로이 설정을 구성 할 수있는 구성 설정 (또는 비슷한)이 있다고 생각합니다.