Dropdown Навигация в Html5 не работает должным образом

Question

Я создаю тему Wordpress и пытаюсь правильно работать с навигацией, но у меня возникают проблемы с некоторыми CSS, необходимыми для создания выпадающего меню. Иерархия списка для навигации генерируется правильно, но остается как неупорядоченный список, а не становится выпадающим списком. Я попытался открыть сайт в нескольких браузерах, но результат тот же. Вот PHP/html5:

<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 я использую:

.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 будет что-то вроде THIS DEMO