控制子菜单内的子菜单

时间:2013-01-14 作者:Bjorn

我现在有一个我正在创建的网站的菜单设置,我想改变一下它弹出和不弹出的方式:P

目前,我将鼠标悬停在我的主菜单项上,如果有子页面,则会弹出一个子菜单(我相信是标准wordpress)。我在这个层次结构中还有其他子菜单,我想在这个弹出菜单中列出,但自己不是弹出菜单。。。困惑了吗?

这里有一个链接,指向我正在努力实现的目标的图像http://www.elementmedia.com.au/stuff/menu.png

我可以用一个静态站点来解决这个问题,但我使用WordPress作为CMS,并且希望使用WordPress菜单,以便在我的客户需要时可以对其进行编辑,如果需要的话,我也不太确定它是如何与WordPress一起工作的,它只是css控制的吗?

1 个回复
最合适的回答,由SO网友:Rafael Marques 整理而成

是的,您可以使用css轻松控制。完成guide about wp nav menu on wordpress codex. 我的快速解决方案:

功能。php

add_theme_support(\'menus\'); // Menus Support
register_nav_menus(array(\'main_menu\' =>\'Main Menu\')); // Main Menu of Website
标题。php

<nav id="menu">
    <?php wp_nav_menu(array(\'theme_location\'=>\'main_menu\')); ?>
    <div class="clear"></div>
</nav>
样式。css

/* Clearfix */
.clear {clear:both}

/* First Level */
nav#menu ul li {float:left; position:relative; text-transform:uppercase; list-style:none}
nav#menu ul li a {display:block; background:#152635; color:#fff; padding:5px 15px; font-size:14px;}

/* Second Level */
nav#menu ul li ul {display:none;}
nav#menu ul li ul li a {width:160px;}
nav#menu ul li:hover ul {display:block; position:absolute; top:26px;}

/* Third Level */
nav#menu ul li ul li ul li {list-style:inside square}
nav#menu ul li ul li ul li a {font-size:11px; color:#ddd}
显然,您需要根据自己的兴趣编辑CSS。享受

结束