css二级菜单视频 |htmlcss样式字体高

在视频中，大家将演示如何使用CSS创建一个简单的二级菜单。首先，大家需要定义一个HTML结构来呈现菜单。以下是一个例子：

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li><a href="#">服务</a></li>
</ul>
</nav>

大家使用了无序列表<ul>和列表项<li>来创建菜单。为了实现下拉菜单，大家在产品列表项下添加了另一个无序列表，其中包含了产品1、产品2和产品3。此列表会自动隐藏，直到鼠标悬停在“产品”菜单项上，它才会可见。

为了实现这个效果，大家需要使用CSS来定义样式。以下是一个例子：

nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
position: relative;
padding: 0 20px;
}
nav a {
display: block;
line-height: 60px;
text-decoration: none;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
min-width: 190px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 190px;
}

这个CSS代码会为菜单的各个元素定义样式，如列表项的浮动、链接的线性高度和文本装饰等。它还定义了下拉菜单的起始状态（display:none），以及在鼠标悬停在菜单项上时菜单的可见状态（display:inherit）。大家还需要添加样式，以使下拉列表正确地对齐。

通过简单的HTML结构和CSS样式，大家可以创建一个基本的、功能齐全的二级菜单。这个效果不仅大大提高了用户体验，还可以帮助用户更有效地访问网站上的信息。