下拉菜單

Question

我已經建立了here.

我不得不設置一些李時珍顯示我的問題的例子：內聯，使他們可以在同一行會發生，但現在我需要向他們添加下拉列表，並且下拉列表發生在我希望他們的頁面的另一側。我必須以不同的方式放置我的原始李？

Answer 1

我不知道你是否試圖將頂層菜單移動到左邊，或者是右邊的子菜單，所以我會提出一個解決方案。

如果您希望主菜單項出現在左側，那麼您需要刪除或更改您的body css中的text-align: right。

如果你想在子菜單出現在右側，然後因爲你<ul> s的絕對定位，你應該改變這種規則：

li:hover ul 
    { 
     left: auto; 
    } 

這樣：

li:hover ul 
    { 
     right: 0; 
    } 

Answer 2

請請注意，如果您想在除錨點標記以外的其他任何地方使用:hover類，請不要讓它在IE6中正常工作，並確保您的其他瀏覽器具有正確的DOCTYPE。

嘗試用這種替代你的CSS的相關部分：

li 
{ 
    display: inline; 
} 

ul.level_1 li 
{ 
    position: relative; 
} 

ul.level_1 ul 
{ 
    position: absolute; 
    visibility: hidden; 
} 

li:hover ul 
{ 
    position: absolute; 
    right: 0; 
    visibility: visible; 
    width: 300px; 
} 

，直到你將鼠標懸停在父列表項節點基本上隱藏的子級列表。

將父列表項目節點設置爲position:relative意味着如果您將任何子節點設置爲position:absolute，它將被設置爲不是瀏覽器窗口，而是相對於父列表項。這將使它們直接顯示在您懸停的列表項下方，而不是在窗口的另一側。

添加了寬度以使子級列表顯示爲行而不是列。