1. 首頁
  2. 問答
  3. Horozontal導航與CSS翻滾

Horozontal導航與CSS翻滾

2011-03-30 102 views
0

側翻的使用一個圖像懸停。這很酷，但我不知道如何讓它在水平菜單中工作。我該怎麼辦？
謝謝，Horozontal導航與CSS翻滾

<head> 
<style> 
/*CSS HOVER WITH ONE IMAGE*/ 
#emailUs{display: block;width: 107px;height: 23px;background: url("slide.jpg") no-repeat 0 0;} 
#emailUs:hover{background-position: 0 -23px;} 
#emailUs span{position: absolute;top: -999em;} 
</style> 
</head> 
<body> 
<!--Trying to get three buttons to go across 'same button as example'--> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a> 
</body> 
</html> 
</html>

CSS雪碧
enter image description here

來源

2011-03-30 DisEngaged

回答

3

我相信你正在尋找的CSS： 「浮動：左;」

一旦您設置一個鏈接「顯示：塊;」，它會自動轉到下一行之後 - 如此 - 讓他們漂浮離開將其帶回成一個水平線。

而且，你不應該有相同的ID不止一個元素。使用class來代替您在多個元素上需要的任何東西。

來源

2011-03-30 21:19:42 Dave

+0

此外，您還可以設置背景的位置左上，然後左下而不是使用具體的數字。如果您決定更改按鈕大小，這將使以後更容易。 – Dave 2011-03-30 21:20:47

+0

如果你還沒有使用「漂浮」了，你也需要把一個div或東西您的菜單後「明確：既;」以確保您的代碼接下來的事情就不要讓推高了浮動菜單下方。 – Dave 2011-03-30 21:22:35

+0

謝謝，現在很簡單。 – DisEngaged 2011-03-30 21:31:33

相關問題

 相關問題