用ul、li标签创建css横向导航菜单示例

下面是使用ul、li标签创建CSS横向导航菜单的攻略：

下面是使用ul、li标签创建CSS横向导航菜单的攻略：

步骤一：HTML结构

首先，我们需要使用HTML标签创建结构。在HTML代码中使用无序列表（ul）和列表项（li）来创建菜单项。

以下是HTML结构的示例代码：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

在上面的代码中，我们创建了一个导航栏（nav）和一个无序列表（ul），其中每个列表项（li）都是导航菜单的一个项目。每个菜单项都有一个链接标签（a）来链接到其他页面。

步骤二：CSS样式

接下来，我们需要定义CSS样式，让导航菜单水平对齐并具有漂亮的样式。

以下是一个基本的CSS样式示例：

nav {
  background-color: #333;
  width: 100%;
}

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

nav li {
  display:inline;
  float:left;
  margin-right:10px;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
}

nav a:hover {
  background-color:#666;
}

在上面的代码中，我们为导航栏和菜单项添加了一些基本的样式。具体来说，我们使用了以下样式：

• 将导航栏的背景色设置为#333
• 将无序列表的默认样式清除
• 将列表项显示为行内元素
• 将列表项浮动到左侧
• 在每个菜单项之间添加10像素的间隔
• 将每个菜单项的链接标签显示为行内块级元素
• 设置链接文字的颜色为白色
• 将链接文字居中显示
• 在链接文字周围设置10像素的内边距
• 在链接鼠标悬停时设置背景颜色为#666

示例一：添加子菜单

现在，我们的导航菜单被创建了，并且具有基本的样式。但是，我们可以通过添加其他样式来使导航菜单更具吸引力和使用性。

以下是一个示例，演示了如何添加子菜单：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Clients</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav {
  background-color: #333;
  width: 100%;
}

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

nav li {
  display:inline;
  float:left;
  margin-right:10px;
  position:relative;
}

nav li ul {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  width:200px;
  background-color:#333;
}

nav li:hover ul {
  display:block;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
}

nav a:hover {
  background-color:#666;
}

要创建子菜单，我们只需在父菜单项上添加包含子菜单项的另一个无序列表。我们还需要在CSS样式中添加一些额外的样式，例如将子菜单隐藏并在父菜单项上使用:hover选择器来显示它们。

示例二：使用字体图标

另一个常见的要求是在导航菜单中使用字体图标。下面是一个示例，演示如何将字体图标添加到页面中的导航菜单：

<nav>
  <ul>
    <li><a href="#"><i class="fa fa-home"></i></a></li>
    <li><a href="#"><i class="fa fa-info"></i></a></li>
    <li><a href="#"><i class="fa fa-search"></i></a></li>
    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  </ul>
</nav>

nav {
  background-color: #333;
  width: 100%;
}

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

nav li {
  display:inline;
  float:left;
  margin-right:10px;
}

nav a {
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px;
  text-decoration:none;
  font-size:24px;
}

nav a:hover {
  background-color:#666;
}

.fa {
  font-family: "Font Awesome";
  font-style: normal;
}

在这个示例中，我们使用Font Awesome来添加字体图标到导航菜单中。在每个菜单项的链接标签中，我们使用标签来包装Font Awesome的CSS类名fa和图标名称。在CSS样式中，我们将Font Awesome的字体添加到导航菜单的类中，并将链接标签的字体大小设置为24像素。