純CSS和JS下拉菜單-onmouseover問題

Question

我已經編寫了這段代碼來創建簡單的CSS和Javascript下拉菜單。

HTML：

<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a href="#" style="position: absolute; top: 88px;">CCC</a></li>
    </ul>
</li>

CSS：

#rankSubMenu {
     display: none; 
     position: absolute; 
     bottom: 10px;
     left: 278px;
}

JS：

function showRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'block';
}

function hideRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'none';
}

菜單項當然具有一些高度，背景和其他內容，以使它們看起來像按鈕。 問題在於，這些按鈕之間有一些空白（如幾個像素），並且當用戶將鼠標光標停在那里時，菜單消失了（實際上，菜單總是那樣做，除非您真正快速移動光標）。 我試圖將整個區域定義為div或嘗試我想到的任何其他想法，但沒有成功。 有什么建議可以解決嗎？

Answer 1

首先，歡迎來到網絡開發的美好世界。 根據您對內聯樣式的使用，我將li作為頂級容器，並嘗試將Javascript用於簡單的菜單顯示/隱藏，我可以告訴您這是新手。 不管！ 它是一個學習過程，網絡開發很有趣。 :)

首先，對於您想要的內容，您可以僅通過CSS進行此操作，而無需position:absolute在菜單項中或類似的瘋狂內容。 這是一個更清潔的菜單顯示的工作示例：

jsFiddle示例

我對學習過程的建議：

1. 熟悉外部CSS圖紙，使用內聯樣式非常古老，並且很難維護
2. 了解樣式時類比ID帶來的好處； 很少（從來沒有）需要使用ID進行樣式設置，並且通常首選使用class，因為您可以將其應用於多個元素
3. 熟悉適當的語義標記； 例如， li不應是頂級容器，如果有子列表或其他內容，則只能是另一個ul的容器
4. 了解外部JS事件處理程序； 在HTML中使用內聯onwhatever處理程序是另一種非常古老的方法，再次使維護變得非常困難

祝你好運！

Answer 2

CSS

.dropdown li{
    float:left;
    width: 240px;
    position:relative;
    }

    .dropdown ol{
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than 
    display:none;) */
    }

    .dropdown li:hover ol{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    }

HTML

<ul class="dropdown"> 
    <li>
    <a href="#" >Your Link</a>
    <ol>
    <li><a href="#"> Your Link 1 </a> </li>
    <li><a href="#"> Your Link 2 </a> </li>
    </ol>
    </li></ul>

您還需要什么呢？ 是否有任何理由使用JavaScript來創建它？

Answer 3

look這個小提琴 。 也許這就是您要尋找的。 它僅使用HTML和CSS。

Answer 4

#rankSubMenu可能是0px高，請嘗試增加一些高度，也可以使用:hover免費執行此js

Answer 5

我的猜測是將您的錨標記設置為顯示塊。 如果anchor標簽不是一個塊，它將忽略一些css屬性，寬度和高度是兩個主要屬性，因此單擊只是文本。

另一個可能的原因是，進入的子菜單部分覆蓋了鏈接（請檢查您的檢查器以查看其覆蓋的區域）。

Answer 6

如果您將高度設置為隱藏了溢出的原始項目的高度，然后在懸停時將高度設置為自動

HTML

<nav class="navigation">
   <ul>
      <li><a href="#menu">Menu</a></li>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
   </ul>
</nav>

CSS

.navigation {
    height: 20px;
    overflow: hidden;
}

.navigation {
    height: auto;
}

不需要JavaScript