请用HTML代码写出默认状态为两个背景为黑色的边框,一上一下,贴合,边框内部文字分别为院系设置和行政机构的白色字体,悬浮状态时院系缓缓设置下拉出4个灰色边框白底字,分别为计科院,管理学院,艺术学院,商学院。字体需要居中
时间: 2023-10-08 15:08:37 浏览: 170
可以设置边框颜色的编辑框
3星 · 编辑精心推荐
以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<style>
.container {
position: relative;
display: inline-block;
width: 200px;
height: 100px;
border: 2px solid black;
background-color: black;
color: white;
text-align: center;
line-height: 100px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 1;
display: none;
}
.container:hover .dropdown {
display: block;
}
.dropdown-item {
width: 100%;
height: 25px;
border: 1px solid gray;
background-color: white;
color: black;
text-align: center;
line-height: 25px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
院系设置
<div class="dropdown">
<div class="dropdown-item">计科院</div>
<div class="dropdown-item">管理学院</div>
<div class="dropdown-item">艺术学院</div>
<div class="dropdown-item">商学院</div>
</div>
</div>
<div class="container">
行政机构
</div>
</body>
</html>
```
效果如下所示:
![下拉菜单](https://i.ibb.co/VpV9d8Y/dropdown-menu.png)
阅读全文