摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>导航模型以及浮动测试</title> <link rel="shortcut icon" type="image/x-icon" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航模型以及浮动测试</title>
<link rel="shortcut icon" type="image/x-icon" href="">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
ul li { list-style-type: none; width: 100px; height: 40px; line-height: 40px ; text-align: center; background-color: pink;margin: 1px 1px 1px;float: right;}
.box1{width: 300px; height: 300px; background-color: yellow;float: right;display: none;}
.clear{clear: both;}
.li1:hover .box1{display: block;}
</style>
</head>
<body>
<ul class="li1">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>PHP</li>
<div class="clear"></div>
<div class="box1">div1</div>
<div class="box1">div2</div>
<div class="box1">div3</div>
</ul>
</body>
</html>
