<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8">
<title>Elemente auf Blockebene in Inline-Elemente konvertieren</title> ;
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<style type="text/css">
p { display:inline;width:200px;height:200px;backgroud-color:#ccc;}
b{display:block;}
/*div{display:inline-block;height:30px;width:400px; Hintergrund -color:pink;}*/
.box{width:100px;height:40px;background-color:#ccc;line-height: 40px;text-align: center;}
.main{ width :100px;height:100px;background-color:pink;line-height:100px; text-align:center;display:none;}
.box:hover .main{display:block;}
</ style> ;
</head>
<body>
<p>Elemente auf Blockebene in Inline-Elemente konvertieren</p><span>123</span>
<b>Inline-Elemente Hauptsächlich Elemente auf Blockebene</b>
<div>Markup in Inline-Blockelemente konvertieren</div><span>123</span>
<div class="box"> Navigation</div>
<div class="main">Kleines Menü</div>
</body>
</html>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<div class="box">导航</div>
<div class="main">小菜单</div>
.box:hover .main {}
说明 .main 在 .box 内部
<div class="box">导航
<div class="main">小菜单</div>
</div>