请用HTML代码写出默认状态为五个蓝色图标，且左浮动，在同一行，悬浮状态时最后一个蓝色图标变为白色的“菜单”二字，且有白色下划线。

以下是代码实现：

<style>
  .icon {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin-right: 10px;
    float: left;
    text-align: center;
    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
  }

  .menu:hover:after {
    content: "菜单";
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-decoration: underline;
  }

  .menu:hover {
    background-color: white;
    color: blue;
  }
</style>

<div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="menu icon"></div>
</div>

解释：

- 通过 `.icon` 类名定义每个图标的样式，包括宽高、背景颜色、右边距、浮动、文本居中等属性。
- 最后一个图标加上 `.menu` 类名，以及 `:hover` 伪类来定义悬浮状态的样式，包括背景颜色、字体颜色等属性。
- 在 `.menu:hover:after` 中，使用 `content` 属性添加文本内容（即“菜单”二字），并设置样式属性，包括字体颜色、字体粗细、字体大小和下划线等。