我正在创建一个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,所以这是可能的,我错过了一些简单的。如果我需要提供更多的信息,请告诉我。
你的标记坏了。你关闭<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