相对定位 绝对定位 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块级元素和行内元素的相互转换</title>
<style>
p{display: inline;}
/* span{display: block;} */
b{display: block;}
/* div{display: inline-block;width: 200px;height:50px;background: #ccc;
border-radius: 10px;
line-height: 50px;} */
.menu{width:400px; height:50px;background: #ccc;border-radius:10px;}
.s_menu1Box{width:60px; height:100px; line-height: 100px;text-align: center; background: pink; display: none;}
.sm_box1{width: 50px;height:20px;line-height:20px;text-align: center; border-radius:10px; margin:5px;}
ul li{list-style: none; float:left; line-height: 50px;margin-left: 10px;}
ul li:hover .s_menu1Box{display: block;}
</style>
</head>
<body>
<p>块级元素</p> <span>span</span>
<b>行内元素转换为块级元素</b>
<div class="box">标签转换为行内块级元素</div>
<I>我来试试效果</I>
<ul class="menu">
<li class="s_menu1">导航
<div class="s_menu1Box">
<div class="sm_box1">简介</div>
<div class="sm_box1">商品</div>
<div class="sm_box1">客服</div>
</div>
</li>
<li class="s_menu1">简介
<div class="s_menu1Box">
<div class="sm_box1">公司</div>
<div class="sm_box1">地址</div>
<div class="sm_box1">法人代表</div>
</div>
</li>
<li class="s_menu1">商品
<div class="s_menu1Box">
<div class="sm_box1">iPhone</div>
<div class="sm_box1">vivo</div>
<div class="sm_box1">oppo</div>
</div>
</li>
<li class="s_menu1">客服
<div class="s_menu1Box">
<div class="sm_box1">小白</div>
<div class="sm_box1">小红</div>
<div class="sm_box1">小黑</div>
</div>
</li>
</ul>
</body>
</html>