css下拉式菜单怎么做 |css画温度计

/* 清除默认样式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 基础样式 */
li {
position: relative;
display: inline-block;
padding: 10px;
cursor: pointer;
}
li:hover {
background-color: #ccc;
}
/* 子菜单样式 */
.sub-menu {
position: absolute;
display: none;
width: 150px;
background-color: #fff;
z-index: 1;
}
.sub-menu li {
display: block;
padding: 8px;
}
/* 鼠标悬停显示子菜单 */
li:hover .sub-menu {
display: block;
}

上面的代码首先清除了默认样式，确保样式的统一性。然后是基础的菜单样式，包括菜单项的位置、显示方式、鼠标指针、悬停效果等。接下来是子菜单的样式，它的位置是绝对定位，菜单项的显示方式设置为块级元素，方便排列布局。最后，通过鼠标悬停事件来控制子菜单的显示与隐藏。

实际应用中，大家只需要在HTML中添加相应的代码，定义菜单和子菜单的结构和内容即可。下面是一个简单的示例：

<ul>
<li>菜单一
<ul class="sub-menu">
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</li>
<li>菜单二
<ul class="sub-menu">
<li>子菜单四</li>
<li>子菜单五</li>
<li>子菜单六</li>
</ul>
</li>
<li>菜单三</li>
</ul>

在实际使用的过程中，可以根据需要修改样式和HTML结构，实现不同的下拉式菜单效果。