Question

这应该在悬停时显示小盒子菜单。由于某种原因，它不起作用。

<!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;}

Answer 1

left: 100%;

将元素推出浏览器的右边缘，因此不可见。通过将其降低到50％进行测试。

Answer 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;}

a：hover不适用于li中的嵌套标记

2 个答案: