HTML列表/菜單 - 寬度可以自動更改嗎？ （用於懸停/滑動）

Question

我正在使用具有各種子菜單的垂直下拉菜單的html列表。每個導航點都是無序列表中的列表項。

每個子導航元素位於最初隱藏的另一個列表中的後續列表中。

當頂部元素懸停時，列表向下滑動。問題在於頂部項目佔用了最寬項目的全部寬度，所以當鼠標實際上位於文本之外時它會'觸發'。

我試圖用一個跨度更專門針對在頂部的項目文本，但隨後的問題是，一旦鼠標離開文本，菜單滑動起來，而懸停在新的項目。

有沒有辦法讓這個頂級導航項目不具有其所有子元素的全部寬度？

編輯：

其實我終於設法解決這個問題 - 問題是，我曾宣佈整個列表上的寬度，因爲沒有它，了slideDown在底部造成菜單「跳」在滑落之後，我想文本本身就是「展開」的東西。如果將寬度應用於子導航項目，則列表不會彈出，「目標」區域只能精確到頂點。

Answer 1

如果我理解正確的話，你的導航是這樣的：

<ul> 
    <li>Nav Point 1 
     <ul> 
      <li>navigation item 1</li> 
      <li>navigation item 2</li> 
      <li>navigation item 3</li> 
     </ul> 
    </li> 
    <li>Nav Point 2 
     <ul> 
      .... 

由於導航項目的導航點的結構中，我想點的大小要通過項目來確定，假設它更大。爲了實現你想要的，我認爲你必須考慮一個不同的結構。

也許你可以使用兩個單獨的列表清單？第一個列表是頂級導航點，第二個是導航項目。您將使用腳本和CSS來隱藏第二個列表，並將這些項目放置在相應頂層導航下顯示。你的腳本會在適當的位置顯示和隱藏菜單。如果您想一次顯示多個導航項目（例如，在鼠標移出後菜單「徘徊」），則您的腳本可能需要將導航項目列表分爲不同的結構。

它不像典型的「列表清單」結構那樣簡單，但它也是一個更復雜的顯示，所以你付出的複雜性。