请用HTML代码写出默认状态为两个背景为黑色的边框，两个边框一上一下，合并在一起，中间有一条小白缝隙，边框内部文字分别为院系设置和行政机构的白色字体，悬浮状态时院系设置边框缓缓下拉出4个背景灰色边框白底字，分别为计科院，管理学院，艺术学院，商学院。字体需要居中

以下是所描述的HTML代码：

<div style="display: inline-block; position: relative;">
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: black;"></div>
  <div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: black;"></div>
  <div style="position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: white;"></div>
  <div style="position: absolute; top: 0; left: 0; width: 100%; height: 50%; text-align: center; color: white; line-height: 50%; font-size: 20px;">院系设置</div>
  <div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; text-align: center; color: white; line-height: 50%; font-size: 20px;">行政机构</div>
  <div style="position: absolute; top: 50%; left: 0; width: 100%; height: 50%; transition: all 0.5s ease-in-out; background-color: white; overflow: hidden;">
    <div style="height: 25%; width: 100%; background-color: #f2f2f2; text-align: center; line-height: 50px;">计科院</div>
    <div style="height: 25%; width: 100%; background-color: #f2f2f2; text-align: center; line-height: 50px;">管理学院</div>
    <div style="height: 25%; width: 100%; background-color: #f2f2f2; text-align: center; line-height: 50px;">艺术学院</div>
    <div style="height: 25%; width: 100%; background-color: #f2f2f2; text-align: center; line-height: 50px;">商学院</div>
  </div>
</div>