CSS의 Wordpress 메뉴 구조 변경

Question

나는 내 웹 사이트에 wordpress twenty11 eleven 테마를 사용했다. 이제 내 사이트의 드롭 다운 메뉴를 작성하고 싶습니다. 기본적으로 WordPress에는 드롭 다운 메뉴 기능이 있습니다. 이제 주 메뉴에서 마우스를 가져 가면 하위 메뉴 부분이 나타납니다. 예 : -

다음과 같은 기본 메뉴가 있습니다. - Home | 정보 | 내가 그것을

홈과 같은 메뉴 "정보"의 하위 메뉴를 보여 약 메뉴에 마우스를 가져 가면

에게 연락하십시오 | 정보 | 내가 역사 메뉴에 마우스를 가져 가면

Our Services 

    History 

    Our Staff 

이가 우는 소리처럼 역사 메뉴의 하위 메뉴를 표시 연락처 : -

홈 | 정보 | 연락처

Our Services 

    History 

     History 1 
     History 2 
     History 3 

    Our Staff 

그러나 나는 정보 메뉴에서 마우스를 가져 가면 기록의 하위 메뉴를 표시하려고합니다. 정보 메뉴에 마우스를 가져 가면 다음과 같이 표시됩니다. -

홈 | 정보 | 연락처

Our Services 

    History 

     History 1 
     History 2 
     History 3 

    Our Staff 

WordPress의 메뉴에서 출력물을 얻도록 도와주세요.

#access { 
    background: #00ADEE; /* Show a solid color for older browsers */ 
    clear: both; 
    display: block; 
    width: 915px; 
} 
#access ul { 
    font-size: 11px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#access li { 
    float: left; 
    position: relative; 
} 
#access a { 
    color: #eee; 
    display: block; 
    line-height: 12px; 
    padding: 4px 9px; 
    text-decoration: none; 
    background: url(images/menu-border.png); 
    background-position: right 6px; 
    background-repeat: no-repeat; 
    text-transform: lowercase; 
} 
#access ul ul { 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    left: 11px; 
    width: 252px; 
    z-index: 99999; 
    background: #FFFFFF; 
    padding: 0 4px; 
    border: 1px solid #00AEEF; 
} 
#access ul ul li { 
} 
#access ul ul ul { 
    left: 23%; 
    top: 0; 
    border: none; 
    width: 150px; 
} 
#access ul ul ul li{ 
    border: none; 
    width: 112px; 
    background:url(images/list.png); 
    background-position: 0 10px; 
    background-repeat: no-repeat; 
    background-color: #FFF; 
    width: 185px; 
} 
#access ul ul ul a{ 
    border: none; 
    background: transparent; 
} 
.sub-menu .menu-item-object-custom a:hover{ 
    height: 40px; 
} 
#access ul ul a { 
    border-bottom: 1px solid #BCBEC0; 
    color: #000; 
    font-size: 10px; 
    font-weight: normal; 
    height: auto; 
    line-height: 1.4em; 
    padding: 5px 7px; 
    width: 237px; 
} 
#access li:hover > a, 
#access ul ul :hover > a, 
#access a:focus { 
    color: #000; 
} 

#access ul ul > a { 
    color: #000; 
} 

#access li:hover > a, 
#access a:focus { 
    color: #FFFFFF; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul ul .current_page_item > a { 
    color: #00ADEE; 
    font-weight: bold; 
} 
#access .current-menu-item > a, 
#access .current-menu-ancestor > a, 
#access .current_page_item > a, 
#access .current_page_ancestor > a { 
    color: #FFFFFF; 
} 

Answer 1

기본적으로 li 요소에 정의 된 : 호버가있는 규칙을 찾아야합니다. 그것은 일반적으로 다음과 같이 진행됩니다 두 번째 수준의 메뉴를 볼 수 있도록하기위한

li:hover ul { 
    display: block; 
} 

, 다음과 같은 것을 추가해야 할 것 :

이

li:hover ul ul { 
    display: block; 
} 

이이 이론에 있어야 얼마나입니다, 메뉴를 설명하는 CSS 부분을보아야 할 것입니다. 정확한 변경 내용을 알려줄 수 있습니다.