制作多级下拉菜单可以使用CSS中的伪类和子选择器来实现。首先，需要为下拉菜单的每个级别设置一个父元素，并使用CSS将其隐藏。然后，在鼠标悬停或点击父元素时，使用伪类和子选择器来显示下一级别的菜单。
以下是一个基本的多级下拉菜单的示例代码：
<nav>
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1.1</a></li>
<li><a href="#">子菜单1.2</a></li>
<li><a href="#">子菜单1.3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单2.1</a></li>
<li><a href="#">子菜单2.2</a></li>
<li><a href="#">子菜单2.3</a></li>
</ul>
</li>
</ul>
</nav>nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a {
display: block;
padding: 10px;
background-color: #333;
color: #fff;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul li:hover > ul {
display: block;
}上述代码中，我们使用了ul和li元素来创建菜单和子菜单。nav ul li选择器用于设置菜单项的位置和样式，而nav ul li ul选择器用于设置子菜单的位置和样式。nav ul li:hover > ul选择器用于在鼠标悬停时显示子菜单。
接下来是tooltip效果的示例代码：
<span class="tooltip">这里有提示<span class="tooltiptext">这是提示文本</span></span>.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 100px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -50px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}上述代码中，我们使用了一个span元素来创建提示。tooltip类用于设置提示框的位置和样式，而tooltiptext类用于设置提示文本的样式。在鼠标悬停时，我们使用tooltip:hover .tooltiptext选择器来显示提示文本。