基于CSS两种菜单创建方式

在CSS中，创建菜单可以通过多种方式，以下是两种常见的方法：

方法一：使用列表（<ul>或<ol>）和列表项（<li>）来创建菜单。

/* 添加基础样式 */
ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
/* 为列表项添加样式 */
ul.menu li {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
ul.menu li a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
ul.menu li a:hover {
  background-color: #f0f0f0;
}

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>

方法二：使用HTML的<div>元素和内联样式或内嵌样式。

<div class="menu">
  <div><a href="#">首页</a></div>
  <div><a href="#">产品</a></div>
  <div><a href="#">关于</a></div>
  <div><a href="#">联系</a></div>
</div>

/* 添加基础样式 */
.menu div {
  float: left;
  margin-right: 15px;
}
 
/* 为链接添加样式 */
.menu div a {
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  display: block;
}
 
/* 为悬浮状态添加样式 */
.menu div a:hover {
  background-color: #f0f0f0;
}

两种方法都可以创建一个基本的菜单，但第一种方法使用了无序列表(<ul>)，更适合用于菜单项目不需要顺序的情况，而第二种方法使用了<div>元素，提供了更多的自定义和灵活性。