CSS 菜單懸停時不下拉

Question

我的博客的下拉菜單有問題。 當我通過“Plamo 評論”進行 hover 時，它不會下拉子菜單。 我閱讀了一些與此相關的文章，但仍然找不到任何解決方案。 我想我在 CSS 上做錯了。

有人可以幫我嗎？ 我會很感激任何幫助。 先感謝您！

 nav.fixnavbar { position: relative; display: block; width: 100%; background: #778595; z-index: 99; padding: 0; margin-bottom: 0; font-size: 0; opacity: 1; }.fixednav { position: relative; margin: 0 auto; padding: 0; max-width: 1010px; }.fixednav li { display: inline-block; position: relative; }.fixednav li a { display: inline-block; padding: 20px; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; }.fixednav li a:hover { background: #6c7a89; color: #fff; }.nav-icon { display: none; } nav.fixnavbar.main-nav-scrolled { position: fixed; top: 0; left: 0; opacity: 0.97; -webkit-transform: translateZ(0); transform: translateZ(0); }.sub-menu li { display: none; }.fixednav li { position: relative; }.sub-menu { display: none; position: absolute; }.fixednav li:hover.sub-menu { display: block; }

 <nav class='fixnavbar'> <ul class='fixednav' id='togglemenu'> <li><a href='/'>Home</a></li> <li><a href='/search/label/list'>List bài viết</a></li> <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li> <li><a href='/search/label/review'>Plamo Reviews</a> <ul class="sub-menu"> <li><a href="#">No1</a></li> <li><a href="#">No2</a></li> </ul> </li> <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars' /></li> </ul> </nav>

Answer 1

為了實現你想要的行為，你可能應該改變兩件事：

1. 您可以擺脫 CSS 規則，該規則為您的子菜單li元素提供display: none值，因為它是不必要的。 如果父.sub-menu設置為display: none那么子級將自動繼承它。

2. 您已將.sub-menu設置為position: absolute ，但您尚未指定任何其他 CSS 規則以指示相對於其 parent.go 的位置因此，例如，您可以嘗試使.sub-menu規則如下所示：

.sub-menu {
  display: none;
  position: absolute;
  top: 75px;
  background: #ccc;
}

這樣，您的意思是您的菜單應位於其父級下方 75 像素處。 background只是為了讓您的子菜單在您的應用程序的 rest 上可見（當然，您可以將其修改為您喜歡的任何內容）。

Answer 2

我不認為 Stackoverflow 是一個讓你完成作業的地方。 然而，這是一個工作示例，其中包含使其工作的最小修復。

1. 您缺少sub-menu的 position （ top ），它就在fixed-nav下方。
2. 子菜單項沒有background-color ，因此白色的文本不可見。

 nav.fixnavbar { position: relative; display: block; width: 100%; background: #778595; z-index: 99; padding: 0; margin-bottom: 0; font-size: 0; opacity: 1; }.fixednav { position: relative; margin: 0 auto; padding: 0; max-width: 1010px; }.fixednav li { display: inline-block; position: relative; background-color: #6b7684; }.fixednav li a { display: inline-block; padding: 20px; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; }.fixednav li a:hover { background: #6c7a89; color: #fff; }.nav-icon { display: none; } nav.fixnavbar.main-nav-scrolled { position: fixed; top: 0; left: 0; opacity: 0.97; -webkit-transform: translateZ(0); transform: translateZ(0); }.fixednav li { position: relative; }.sub-menu { display: none; position: absolute; top: 54px; left: 0; }.fixednav li:hover.sub-menu { display: block; }

 <nav class='fixnavbar'> <ul class='fixednav' id='togglemenu'> <li><a href='/'>Home</a></li> <li><a href='/search/label/list'>List bài viết</a></li> <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li> <li><a href='/search/label/review'>Plamo Reviews</a> <ul class="sub-menu"> <li><a href="#">No1</a></li> <li><a href="#">No2</a></li> </ul> </li> <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars' /></li> </ul> </nav>