CSS邊框和：懸停動態僞類

我一直只使用CSS建立一個持久的支線菜單有兩個層次。這是相當標準的。CSS邊框和：懸停動態僞類

這是一組嵌套UL的和UL的：懸停狀態是什麼顯示和隱藏子菜單的水平。

事情是這樣的：

| *Pets* | Colors | Cars | 
| Cats | Dogs | Birds| Goats | Sheep | 


| Pets | *Colors* | Cars | 
| Red | Orange | Green | Blue| Yellow |

然後我在第一級UL元素的底部增加了一個像素邊框。就像這樣：

| *Pets* | Colors | Cars | 
-------------------------------------- 
| Cats | Dogs | Birds| Goats | Sheep |

當我將鼠標懸停在第一級別項目（寵物），然後將鼠標移動到第二級（貓），整個第二層消失。

我終於想通了，在UL的1px寬的邊框不包括在UL的懸停區域。

我可以將邊框添加到支線一級菜單的底部不會弄亂菜單徘徊？

謝謝！

來源

2010-05-23 dbasch

既然你實際上是<ul>內添加:hover狀態到<li> S，父<ul>邊界是不包括在:hover區域。這將解決您的問題，將邊框添加到每個<li>而不是父母<ul>。確保將左右邊距爲0添加到<li> s，即使您這樣做了，仍然可能需要添加負左邊距或左邊位置以消除邊框中的任何間隙，並且可以在子菜單中添加覆蓋樣式<li>如果它們最終也有底部邊界。

編輯：好吧，我有一個解決方案，希望能爲你工作，使用下面的HTML：

<ul> 
    <li>Main1 
     <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul> 
    </li> 
    <li>Main2 
     <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul> 
    </li> 
    <li>Main3 
     <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul> 
    </li> 
    <li>Main4 
     <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul> 
    </li> 
</ul>

這個CSS：

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; } 
ul li { cursor:pointer; display:inline-block; position:relative; height:30px; 
     zoom:1; _display:inline; } 
ul li:hover ul { display:block; } 
ul li ul { border:0 none; display:none; position:absolute; top:30px; } 
ul li ul li { display:inline; padding:5px; }

關鍵零部件這裏有：

的ul設置高度由比主ul li的高度小量等於border-width
集display:inline-block上li所以高度屬性生效
- （注：zoom:1; _display:inline;爲IE6）
上在副主ul li和position:absolute設置position:relative「UL利UL '具有'最高'值的主ul'高度

測試和工作：http://jsfiddle.net/TKrSM/1/ （可能需要調整版本中的填充高度和頂部值）

來源

2010-05-23 20:11:42 mVChr

謝謝你的回答。我試圖給LI子元素添加邊框，但是它引發了一些問題。例如，某些菜單級別只有幾個項目。它們不夠寬，無法跨越整個頁面寬度。 LI上的任何邊框也不足以跨越整個頁面寬度。 – dbasch 2010-05-24 15:40:37

嘗試新的解決方案，請參閱編輯答案。 – mVChr 2010-05-24 18:30:00

哇！真棒！這正是我需要的。感謝你的回答。 – dbasch 2010-05-25 02:17:24

您可以使用背景並在底部給它一個1px的黑色線條，或者您可以添加一個元素並將其絕對定位爲1px高度和黑色背景。我會選擇後臺選項，因爲它更容易。

來源

2010-05-23 17:51:30

非常感謝您的回答。我也曾考慮過背景圖像解決方案。我沒有想到1px高度的絕對定位塊。 – dbasch 2010-05-25 02:16:04

CSS邊框和：懸停動態僞類

回答

相關問題