下拉菜單和導航問題

我剛剛嘗試爲我的導航設計一個下拉菜單。不幸的是，當我將導航欄中的下拉按鈕懸停時，整個導航欄和下拉菜單現在都在閃爍。當我嘗試點擊它時，下拉菜單也會消失。下拉菜單和導航問題

我不能給你我的代碼塊，因爲直接＃1將其轉換爲HTML（不知道爲什麼），所以我可以給你一個鏈接到我的測試頁：http://keinkopf.de/designs/1/

編輯：

HTML

<nav> 
<ul> 
<li><a href="#" id="block1">Start</a></li> 
<li><a href="#" id="block2">Themen</a> 
<ul> 
<br /> 
<li><a href="#">1</a></li><br /> 
<li><a href="#">2</a></li><br /> 
<li><a href="#">3</a></li><br /> 
<hr /><hr /> 
</ul> 
</li> 
<li><a href="#" id="block3">3s</a></li> 
</ul> 
</nav>

CSS

 ul li ul{ 
      display: none; 

      background-color: #000000; 
      width: 400px; 
      margin-top: 40px; 
      float: left; 
     } 

    ul li ul li{ 
      margin-left: 10px; 
     } 

     ul li:hover ul{ 
      display: block; /* display the dropdown */ 
     } 

    ul { 
     padding: 0; 
     list-style: none; 
    } 

    ul li ul hr{ 
      border-color: #FFFFFF; 
      border-width: thin; 
      border-style: solid; 
     } 

li { 
    display: inline; 
    margin-right: -1px; 


} 



#block1 { 
    background-color: #000000; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-right: 30px; 
    padding-left: 30px; 

} 

#block1:hover { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 
} 

#block2 { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 

} 

#block2:hover { 
    background-color: #000000; 
    color: #FFFFFF; 
} 

#block3 { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 
} 

#block3:hover { 
    background-color: #000000; 
    color: #FFFFFF; 
} 

nav a { 
    text-decoration: none; 
    color: #FFFFFF; 
    font-family: 'Lato', Arial; 
    font-size: 15pt; 
} 

nav { 
    margin-top: 39px; 


} 

hr { 

    border-color: #000000; 
    border-width: 2px; 
}

來源

2014-12-19 Johannes Schütt

將代碼粘貼到問題中，突出顯示它，然後單擊工具欄中的「代碼格式」圖標（看起來像是「{}」） – JJJ

是否有必要？ –

如果我可以推薦使用絕對位置，它不影響其他對象，而不是保證金使用填充。

ul li ul{ 
    position: absolute; 
    padding-top: 40px; 
}

如果你想有一些可用空間之間的酒吧和下拉，然後只是添加一些div圍繞。

來源

2014-12-19 23:03:47

那麼，這工作相當不錯，但現在我有一個下拉李和我的導航之間的大空間。 –

你是什麼意思的一個大空間？如果我把這兩行並刪除margin-top，那很好。是不是因爲填充頂對你來說太大？ –

我的錯誤... padding-top太大謝謝 –

你必須position'李'（菜單）absolute內的'ul'（下拉菜單）。

每次將鼠標懸停在菜單項上時，都會顯示菜單並且菜單項的位置發生變化。這就是它閃爍的原因。

最重要的是，您應該從您的'ul li ul'中刪除margin-top，並使列表項li inline-block而不是內聯，以便下拉列表顯示在listitem的下方。

我創建了codesnipped here

來源

2014-12-19 23:03:10 ChiefORZ

我相信它與你的標籤的位置有關。我說的是：當鼠標懸停在標籤上時，它會顯示其餘的子標籤，因此將標籤從鼠標上拉下來，因此關閉菜單或導致閃爍。

來源

2014-12-19 23:06:00

下拉菜單和導航問題

回答

相關問題