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導航菜單不會擴大，直到點擊該部分

回答

相關問題