请用HTML代码写出默认状态为两个黑色边框,文字分别为院系设置,行政机构的白色字体,悬浮状态时院系缓缓设置下拉出4个灰色边框白底字,分别为计科院,管理学院,艺术学院,商学院。
时间: 2023-10-04 15:03:15 浏览: 29
```html
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
border: 2px solid black;
padding: 10px;
color: white;
font-weight: bold;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
background-color: white;
border: 2px solid gray;
border-top: none;
min-width: 160px;
padding: 10px;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 5px;
border-bottom: 1px solid gray;
}
.dropdown-content a:hover {
background-color: gray;
color: white;
}
</style>
</head>
<body>
<div class="dropdown">
院系设置
<div class="dropdown-content">
<a href="#">计科院</a>
<a href="#">管理学院</a>
<a href="#">艺术学院</a>
<a href="#">商学院</a>
</div>
</div>
<div class="dropdown">
行政机构
<div class="dropdown-content">
<a href="#">机构1</a>
<a href="#">机构2</a>
<a href="#">机构3</a>
<a href="#">机构4</a>
</div>
</div>
</body>
</html>
```