1. 首頁
  2. 問答
  3. a：懸停不適用於li中的嵌套標籤

a：懸停不適用於li中的嵌套標籤

2013-07-27 40 views
-1

這應該在懸停時顯示小方塊菜單。由於某種原因，它不起作用。a：懸停不適用於li中的嵌套標籤

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Menu</title> 
<link rel="stylesheet" href="css.css" /> 

</head> 
<body> 

<ul class="menu"> 
<li><a href="#">one <i>iiiiiii</i></a></li> 
<li><a href="#">two <i>iiiiiii</i></a></li> 
<li><a href="#">three <i>iiiiiii</i></a></li> 
</ul> 

</body> 
</html> 


ul.menu li{position: relative;} 
ul.menu li a i {display: none;} 
ul.menu li a:hover i {display: block; width: 6em; position: absolute; top: 0; 
left: 100%; margin: -1em 0 0 1em; padding: 1em; background: #CDE; 
border: 1px solid grey;}

來源

2013-07-27 lunar

回答

4 
left: 100%;

是推動元素之外的右邊緣的地方瀏覽器，所以它不可見。通過將其降至50％進行測試。

來源

2013-07-27 23:57:48

-2

使用這個CSS

你也可以使用權：0;在ul.menu li a:hover i如果你忽略了左，右的CSS瀏覽器會自動選擇它，並且將它對準的地方，應該是沒有位置

ul.menu li{position: relative;} 
ul.menu li a i {display: none;} 
ul.menu li a:hover i {display: inline; width: 6em; position: absolute; top: 0;right:0; margin: -1em 0 0 1em; padding: 1em; background: #CDE; 
border: 1px solid grey;}

來源

2013-07-27 23:55:01 Hushme

+0

*使用此css * - 好吧，*爲什麼*？ –

+0

，因爲我已經更新了 – Hushme

+1

@Hushme，你的代碼壞了，'right：0'後面的分號丟失，所以'right'和'left'屬性都不起作用。 @PeteScott，這不是因爲''被設置爲'block'，這是因爲具有'position：relative'的'li'具有完整的頁面寬度，並且100％從它被計數。 –

相關問題

 相關問題