CSS中的下拉菜单
<!--CSS基础-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS中的浮动</title>
<link rel="shortcut icon" type="images/x-icon" href="images/logo.jpg">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
*{padding:0px;margin: 0px;}/*浏览器自带边距清零*/
ul li{list-style: none;width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #ccc;margin: 0px 1px;float: left;}
.box1{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: left; margin: 0px 2px;position: relative;}
.clear{clear: both;}/*清除浮动*/
.box2{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: right; border: 1px solid #ccc; border-radius: 10px; margin: 0px 5px;}
.box2:hover{background-color: red;}
.to_bottom {
width: 0;
height: 0;
border-top: 10px solid skyblue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.box1 ul{display: none; }
.box1:hover ul{display: block;background-color: #6C6C6C;}
.box1 ul li:hover{background-color: #f5f5f5;}
</style>
</head>
<body>
<!--<div class="clear"></div>-->
<div class="box1">HTML<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>html5</li>
<li>css3</li>
<li>xml</li>
</ul>
</div>
<div class="box1">jQuery<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>javaScript</li>
<li>DOM</li>
<li>Ajax</li>
</ul>
</div>
<div class="box1">PHP</div>
<div class="box2">登录</div><div style="float: right; width: 2px; height: 40px; line-height:40px; text-align:center; margin: 0px 5px;"><span>/</span></div><div class="box2">注册</div>
<div class="clear"></div>
<div style="width: 100%; margin: 0 auto; height: 80px; background-color: #088;"></div>
</body>
</html>
您好，请问一下：为什么使用div的时候，没有设置position也不会出现ul 会挤压后边的父亲元素后边的div呢？