CSS导航菜单不会扩大，直到点击该部分

我想创建一个导航的Wordpress像下面的链接导航。CSS导航菜单不会扩大，直到点击该部分

基本上导航不展开。它只显示用户是该部分的子链接。在上面的链接中，一个例子是"Service"部分。只有点击"Service"才会显示子链接。客户端在Dreamweaver中使用Dreamweaver模板和可编辑区域完成此操作，但在Wordpress中无法使用。

任何帮助将不胜感激。我尝试了导航，但子链接全部显示如下链接。

http://johnwp.annapolisbook.com/?page_id=6

给大家，帮助，感谢你提前。

来源

2013-04-30 danny

像这样的事情“应该”的工作（你可能需要调整的选择）：

.menu ul ul { 
    display: none; 
} 
.menu ul .current_page_item ul, .menu ul .current_page_ancestor ul { 
    display: block; 
}

这里的关键是要隐藏所有的子菜单.menu ul ul和使用.current_page_item父元素展现正确的子菜单。

来源

2013-04-30 07:18:45 mikedidthis

上述解决方案工作得很好。唯一的一点是，如果你点击子导航中的链接，它会再次崩溃。如果单击子导航，您是否有关于如何保持其打开的建议？例如，如果您在下面的链接点击“服务”，然后点击“设计”，链接结构保持打开状态。 http://workableweb.com/_pages/serv_redesign.htm 但现在在WordPress的网站上，如果你点击子链接它会消失。例如，如果您单击“Lost Fleet Series”，然后单击“摘录自Guardian”，则子链接将消失。 http://johnwp.annapolisbook.com/ 有什么建议吗？ – danny 2013-05-01 13:55:55

更新了答案以反映您的评论要求。 – mikedidthis 2013-05-01 14:03:45

我对此表示歉意！ – danny 2013-05-01 14:06:23

最简单的办法是给身体或包裹元素当前页面的ID，像这样：

<ul class="nav"> 
    <li>Services</li> 
    <li class="nav-section services-section"> 
     <a href="#">My link</a> 
    </li> 
</ul>

：

<body id="services">

而列表项的一类，即默认为隐藏

然后寻找它在CSS：

.nav-section { display: none; } 
#services .services-section { display: block; }

当然也有像签入更多的动态方法g，但我认为这是一个快速，适合的解决方案

来源

2013-04-30 07:20:23 casraf

感谢您的回复。不幸的是，我不认为我可以真正编辑代码太多，因为代码是从Wordpress驱动的。以下是我目前的CSS和Wordpress注入主题的HTML。 – danny 2013-04-30 19:57:13

如果这是wordpress，您可以自由编辑主题。创建新主题时，只能插入要更改的文件，从默认主题中提取其内容，然后更改所需内容;不在主题文件夹中的文件将从默认文件中获取。此外，如果是这样的话，我会检查每个页面是否有一个你可以识别的选择器，然后尝试找出如何选择你想做的更改 – casraf 2013-05-01 07:44:39

CSS导航菜单不会扩大，直到点击该部分

回答

相关问题