When the mouse passes over the navigation label, it has no effect. How can I find the problem?
<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8">
<title>Convert block-level elements and inline elements</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;background-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>Convert block-level elements to inline elements </p><span>123</span>
<b>Inline elements are mainly block-level elements</b>
<div>Convert markup For inline block elements</div><span>123</span>
<div class="box">Navigation</div>
<div class ="main">Small menu</div>
</body>
</html>
