1. 首页
  2. 问答
  3. a：悬停不适用于li中的嵌套标签

a：悬停不适用于li中的嵌套标签

2013-07-27 39 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％从它被计数。 –

相关问题

 相关问题