Html5의 드롭 다운 탐색이 제대로 작동하지 않습니다

Question

Wordpress 테마를 만들고 탐색 기능을 제대로 작동 시키려고하지만 드롭 다운 메뉴를 만드는 데 필요한 CSS와 관련된 문제가 있습니다. 탐색의 목록 계층 구조는 올바르게 생성되지만 드롭 다운 목록이 아닌 정렬되지 않은 목록으로 유지됩니다. 몇 가지 브라우저에서 사이트를 열어 보았지만 그 결과는 같습니다. 여기

<nav role="navigation" class="site-navigation main-navigation"></nav> 
    <h1 class="assistive-text"><?php _e('Menu', 'shape'); ?></h1> 
    <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e('Skip  to content', '_s'); ?>"><?php _e('Skip to content', 'shape'); ?></a></div> 
    <?php wp_page_menu('title_li=&sort_column=menu_order&show_home=1') ?> 
</nav> 

내가 사용하고있는 CSS된다 다음은 PHP/HTML5는

.main-navigation { 
    clear: both; 
    display: block; 
    padding: 1.5em; 
} 
.main-navigation:after { 
    clear: both; 
    content: ""; 
    display: block; 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    margin: 0.5em 0; 
    position: relative; 
} 
.main-navigation a { 
    color: #7c948a; 
    display: block; 
    font-size: 1.4rem; 
    font-weight: bold; 
    margin-right: 2em; 
    text-decoration: none; 
} 
.main-navigation ul ul { 
    background: #e9e0d1; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    display: none; 
    float: left; 
    position: absolute; 
     top: 1.2em; 
     left: 0; 
    z-index: 99999; 
} 
.main-navigation ul ul ul { 
    left: 100%; 
    top: 0; 
} 
.main-navigation ul ul a { 
    padding: 0 1.5em; 
    width: 200px; 
} 
.main-navigation ul ul li { 
} 
.main-navigation li:hover > a, 
.main-navigation li.current_page_item a, 
.main-navigation li.current-menu-item a, 
.main-navigation ul ul a:hover { 
    color: #33605a; 
} 
.main-navigation ul ul :hover > a { 
} 
.main-navigation ul li:hover > ul { 
    display: block; 
} 

/* Small menu */ 
.menu-toggle { 
    color: #7c948a; 
    cursor: pointer; 
    font-size: 20px; 
    font-weight: bold; 
    text-align: center; 
} 
.main-small-navigation .menu { 
    display: none; 
}` 

내가 PHP 및 HTML5 오히려 새로운 오전, 그래서 내가 뭔가를 간단 말이냐 가능성이있다. 자세한 정보를 제공해야하는지 알려주세요.

Answer 1

마크 업이 깨졌습니다. <nav>을 두 번 닫고 있습니다. 첫 번째 줄에서 닫는 태그 </nav>을 제거하십시오.

<nav role="navigation" class="site-navigation main-navigation"> 
    <h1 class="assistive-text"><?php _e('Menu', 'shape'); ?></h1> 
    <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e('Skip  to content', '_s'); ?>"><?php _e('Skip to content', 'shape'); ?></a></div> 
    <?php wp_page_menu('title_li=&sort_column=menu_order&show_home=1') ?> 
</nav> 

나는 PHP 출력 [jsFiddle]에 뭔가