드롭 다운 메뉴 만들기

Question

안녕하세요 여러분, 지금 웹 사이트에서 일하고 있는데 드롭 다운 하위 메뉴가있는 가로 탐색 메뉴를 만들고 싶습니다. 아래에 몇 가지 웹 사이트 예제 탐색 메뉴를 추가하십시오. 당신이 자유로운 자습서를 클릭하면 당신은 내가 의미하는 것을 얻을 것이다. 나는 ul과 li 및 css가있는 간단한 드롭 다운 메뉴를 만들 수 있지만 각 행에 대해 diffirent hover color를 할당하는 방법을 알지 못합니다.

누군가 나를이 안내서로 만들 것을 바랍니다. 링크는 다음과 같습니다.

<ul> 
    <li class='active'><a href='index.html'><span>Main Menu</span></a></li> 
    <li class='has-sub'><a href='#'><span>Main Menu 2</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Sub Menu </span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item 1</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item 2</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Main Menu 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>Main Menu 3</span></a></li> 
    <li class='last'><a href='#'><span>Main Menu 4</span></a></li> 
</ul> 

과 CSS를

입니다 :

http://tutsplus.com/

는 당신에게 모든

다음

내가 쓴 내가 소스 코드에

을 위해 노력하고있어이의 감사

#menu { 
    border: none; 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
    font-weight: bold; 
    width: auto; 
} 
#menu ul { 
    background: #333333; 
    height: 35px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#menu li { 
    float: left; 
    padding: 0px; 
} 
#menu li a { 
    background: #333333 url("images/seperator.gif") bottom right no-repeat; 
    display: block; 
    font-weight: normal; 
    line-height: 35px; 
    margin: 0px; 
    padding: 0px 25px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 14px; 
} 
#menu > ul > li > a { 
    color: #cccccc; 
} 
#menu ul ul a { 
    color: #ffffff; 
} 
#menu li > a:hover, 
#menu ul li:hover > a { 
    background: #58bce1 url("images/hover.png") bottom center no-repeat; 
    color: #ffffff; 
    text-decoration: none; 
} 
#menu li ul { 
    background: #333333; 
    display: none; 
    height: auto; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    position: absolute; 
    width: 225px; 
    z-index: 200; 
    /*top:1em; 
    /*left:0;*/ 

} 
#menu li:hover ul { 
    display: block; 
} 
#menu li li { 
    background: url('images/sub_sep.gif') bottom left no-repeat; 
    display: block; 
    float: none; 
    margin: 0px; 
    padding: 0px; 
    width: 225px; 
} 
#menu li:hover li a { 
    background: none; 
} 
#menu li ul a { 
    display: block; 
    height: 35px; 
    font-size: 12px; 
    font-style: normal; 
    margin: 0px; 
    padding: 0px 10px 0px 15px; 
    text-align: left; 
} 
#menu li ul a:hover, 
#menu li ul li:hover > a { 
    background: #58bce1 url('images/hover_sub.png') center left no-repeat; 
    border: 0px; 
    color: #ffffff; 
    text-decoration: none; 
} 
#menu p { 
    clear: left; 
} 
#menu ul ul li { 
    position: relative; 
} 
#menu ul ul ul { 
    left: -9999px; 
    top: 0; 
} 
#menu ul ul li:hover > ul { 
    left: 100%; 
} 
#menu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#menu.align-center > ul { 
    text-align: center; 
    font-size: 0; 
} 
#menu > ul > li { 
    position: relative; 
} 
#menu.align-right > ul > li { 
    float: right; 
} 
#menu.align-right > ul > li:hover > ul { 
    right: 0; 
    left: auto; 
    text-align: right; 
} 
#menu.align-right ul ul li a { 
    text-align: right; 
} 
#menu.align-right ul ul li:hover > ul { 
    left: auto; 
    right: 100%; 
} 

Answer 1

당신은 실제로 당신이 원하는 정확히 무엇 this

를 찾고 있습니다 (이것은 단지 시연을위한, 상점 사용하는 다른 선택기)를 WORKING FIDDLE입니다.

희망이 도움이 될 것입니다.

Answer 2

드롭 다운의 각 메뉴에 hover 효과를 생성 하시겠습니까? 그래서 처음에 가져 가면 빨간색이되고 두 번째 파란색은 파란색이됩니다. 여기

당신이 할 수있는 방법은 다음과 같습니다

#menu ul ul > li:nth-child(2):hover { 
    background: #ff0000; 
} 

여기 2 번째 요소를 의미한다. 그래서 모든 요소에 이것을 추가 할 수 있습니다.

여기