css子菜單在wordpress中動作

-1

我已經手動添加了一個菜單到我的WordPress的header.php主題文件當我使用單個ul時，一切看起來都很棒，但如果我使用WP的子菜單功能，單一菜單鏈接，結果很奇怪，你可以在這裏看到。 result css子菜單在wordpress中動作

結果我找的是增加一個：懸停效果纔將顯示子菜單項，但首先映入項目應符合取得，右李項（工作 - >求職者&就業優惠）

，爲什麼會收到意想不到521px子菜單的寬度和我如何解決我的困境

<li id="menu-item-103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-103"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Jobs</a> 
<ul class="sub-menu"> 
    <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101"><a href="http://ldpolishing.com/_dev/jobs/job-seekers/">Job Seekers</a></li> 
    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Job Offers</a></li> 
</ul> 
</li>

Link to the page 謝謝

來源

2013-04-12 Vad.Gut

沒有看到應用於菜單的CSS，絕對沒有辦法知道。如果你想讓人們調試，我建議發佈一個工作示例。 – Axel

添加鏈接到頁面 –

請讓它成爲JSFiddle。 – Ennui

原理很簡單。您可以將父母<li>標記設置爲position: relative;，然後您可以將.sub-menu設置爲position: absolute;並將其設置爲left: 0;，因此它排在您的<li>的左側。

然後，您可以隱藏子菜單並將鼠標懸停在li上時顯示它。

試試這個CSS：

#top .menu li { 
    position: relative; 
} 

#top .menu .sub-menu { 
    display: none; 
    position: absolute; 
    left:0; 
    text-align: left; 
    margin:0; 
    width: 150px; 
} 

#top .menu .sub-menu .li { 
    padding:0; 
} 

#top .menu li:hover > .sub-menu { 
    display: block; 
}

來源

2013-04-12 15:52:02 Axel

我不得不做很多修改，但想法是相同的非常感謝 –

你爲什麼不給我建立了一個嘗試這種基於jQuery的菜單腳本？它使用CSS和jQuery的組合來製作鍵盤可訪問的水平菜單，並支持多達五級導航。此外，它具有背景高亮/調光，顯示你的路，你通過菜單遍歷：

http://code.google.com/p/keyboard-accessible-jquery-menu/

你可以看到它的演示在這裏的行動：

http://designbymichael.com/dev/top-menu/demo/

至於你源代碼中，您遇到了一些問題 - 您的父LI標記應該具有屬性position：relative，以使您的子菜單成爲從其啓動的起始位置。然後，您的子菜單應具有絕對位置，然後根據父導航進行相應定位。我還建議使用margin-right而不是填充右鍵來填充菜單空間，因爲您試圖在菜單項之間放置空白空間，而不是僅在每個項目的一側放置這種極端填充。

由於@Ennui指出，如果你想使這個的jsfiddle（jsfiddle.net）你讓我們分公司您的副本關閉，進行編輯，並告訴你什麼是我們想出了。

這就是說，節省一點時間，並使用預建的菜單腳本，而不是試圖重新發明車輪。絕不是，不要覺得你不得不使用我的 - 有數百個腳本可供選擇。

來源

2013-04-12 16:14:17

css子菜單在wordpress中動作

回答

相關問題