[英]Wordpress menu style
我在设置Wordpress菜单的样式和表现方式方面遇到一些困难。
因此,我使用以下内容显示菜单:
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<br />
<form method="get" id="search_form" action="<?php bloginfo('home'); ?>"/>
<input type="text" class="text searchForm" name="s" value="Search" >
</form>
</nav>
这是样式:
nav li {
background-color: #99D9F3;
margin-bottom: 2px;
padding: 0;
font-weight: 300;
}
nav a {
color: #000;
margin: 0;
padding: 5px; /* you can apply padding to the anchor tags instead */
text-decoration: none;
display:inline-block;
}
.sub-menu{background-color: #fff;}
.sub-menu li {
background-color: #fff;
margin: 5px;
padding: 0;
font-weight: 300;
border-left: 2px solid white;
}
.sub-menu li:hover{
border-left: 2px solid orange;
}
.sub-menu a{color:#aaa;}
.sub-menu a:hover{color:#000; font-weight: 500;}
除了几件事外,一切都很好,只有文本是可单击的,因为我需要整个<li>
成为可单击的区域。 另外,将子项添加到菜单时,它会从位于其下的菜单项中伸出<li>
标记,我也需要一种隐藏这些项的方法,直到单击该项,然后显示子菜单项。
不要对列表项使用填充。 另外,您需要将锚标签显示的属性值设置为inline-block或block。
display:inline-block;
/* Or just */
display:block;
请参阅以下内容
nav li {
background-color: #99D9F3;
margin-bottom: 2px;
padding: 0;
font-weight: 300;
}
nav a {
color: #000;
margin: 0;
padding: 5px; /* you can apply padding to the anchor tags instead */
text-decoration: none;
display:inline-block;
}
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
您可以使用superfish菜单jquery。它将帮助您
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.