-1

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

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

2 回答 2

4 
left: 100%;

将元素推到浏览器右边缘之外，因此它不可见。通过将其减少到 50% 进行测试。

于 2013-07-27T23:57:48.973 回答
-2

使用这个 CSS

你也可以使用 right:0; 如果你在ul.menu li a:hover icss中忽略左右，浏览器会自动选择它并将它对齐到它应该没有位置的地方

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-27T23:55:01.510 回答