css写一个菜单有建筑历史文化故事地点

HTML代码：

<div class="menu">
  <ul>
    <li><a href="#">建筑历史</a></li>
    <li><a href="#">文化</a></li>
    <li><a href="#">故事</a></li>
    <li><a href="#">地点</a></li>
  </ul>
</div>

CSS代码：

.menu {
  width: 100%;
  background-color: #f2f2f2;
  text-align: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  margin: 0 10px;
}

.menu li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.menu li a:hover {
  background-color: #333;
  color: #fff;
}

解释：

.menu 类定义了整个菜单的宽度和背景颜色，并把文本居中对齐。
ul 元素的样式定义了列表的格式，包括了去除默认的列表样式、内外边距归零。
li 元素的样式定义了菜单项的样式，包括了将它们水平排列和指定相邻项之间的距离。
a 元素的样式定义了菜单项链接的样式，包括了设置其为块级元素、指定内边距、文本颜色和字体加粗。
当鼠标悬停在菜单项上时，它们的背景颜色变成了黑色，文本颜色变成了白色，以提高交互性。