Html5中的下拉導航無法正常工作

我正在創建一個Wordpress主題，並試圖讓導航正常工作，但我遇到了一些創建下拉菜單所需的CSS問題。導航列表層次結構正確生成，但保持爲無序列表而不是下拉列表。我曾嘗試在幾個不同的瀏覽器中打開該網站，但結果相同。這裏是PHP/HTML5：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，所以它可能是我簡單的東西。如果我需要提供更多信息，請告訴我。

來源

2013-04-25 Kristin

例如在[的jsfiddle（http://jsfiddle.net）將是巨大的。 – Fallup 2013-04-25 19:57:03

顯示生成的HTML。 PHP是沒用的 – Turnip 2013-04-25 20:09:11

您的標記已損壞。您正在關閉<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

來源

2013-04-25 20:17:10 Turnip

Html5中的下拉導航無法正常工作

回答

相關問題