css 二级导航菜单 |css3.0和2.0的区别

.nav ul {  /* 外层 ul 的样式 */
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {  /* 外层 li 的样式 */
display: inline-block;
position: relative;
}
.nav ul li:hover ul {  /* 鼠标悬浮在外层 li 上时对内层 ul 的样式 */
display: block;
}
.nav ul ul {  /* 内层 ul 的样式 */
display: none;
position: absolute;
top: 100%;
left: 0;
}
.nav ul ul li {  /* 内层 li 的样式 */
display: block;
}

接下来大家一块来解析上述 CSS 代码：

首先大家为外层的 ul 元素定义了样式，将其列表样式去除，外边距和内边距设为 0。

接下来大家为外层 li 元素定义了样式，让其变成块状元素，并且使用相对定位来为内层 ul 提供绝对定位的参考点。

然后大家为鼠标悬浮在外层 li 元素上时内层 ul 的样式定义了样式，让其显示出来。

最后大家为内层 ul 和 li 元素定义了样式，让其以块状元素的形式显示出来。

使用上述 CSS 代码实现二级导航菜单，大家只需要在 HTML 代码中嵌套两个 ul 元素即可。外层 ul 元素中包含多个外层 li 元素，每个外层 li 元素中包含一个内层 ul 元素，内层 ul 元素中包含多个内层 li 元素。