-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; も使用できます。cssでul.menu li a:hover i左右を無視すると、ブラウザは自動的にそれを選択し、位置なしであるべき場所に配置します

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 に答える