css导航栏二级展开

CSS导航栏二级展开是网页设计中比较常用的一种效果，也是很有用的一种效果。通过CSS来实现这种效果非常简单，只需要一些基础的CSS知识就能实现。下面我们来看一下如何实现CSS导航栏的二级展开效果。

/* CSS代码 */
nav ul {
  list-style:none;
  margin:0;
  padding:0;
}
nav li {
  display:inline-block;
  position:relative;
}
nav a {
  display:block;
  padding:0 10px;
  line-height:30px;
}
nav ul ul {
  display:none;
  position:absolute;
  top:30px;
  left:0;
  background:#fff;
  border:1px solid #ccc;
  padding:10px 0;
}
nav ul ul li {
  display:block;
  width:200px;
  text-align:left;
}
nav ul ul a {
  line-height:30px;
  padding:0 10px;
}

nav ul li:hover > ul {
  display:block;
}

代码解析：

首先，我们需要将ul的默认样式清除，让所有的ul、li、a元素都没有任何样式。接着，我们将li的display属性设置为inline-block（让所有的li元素横向排列），将a的display属性设置为block（将a元素设为块级元素，方便设置宽度、高度、内边距等样式），将ul ul的display属性设置为none（将二级导航栏设为隐藏状态），将ul ul的position属性设置为absolute（让二级导航栏相对于父元素进行定位）。

接下来，我们将li的position属性设置为relative（这样才能让二级导航栏与父元素进行定位，并且让其在父元素内部显示），将ul ul的top属性设置为30px（这样可以让二级导航栏与父元素的下边框对齐），设置border属性以及padding属性（让二级导航栏有一个清晰明了的边框，同时让列表项之间有一定的间隔）。

最后，我们使用:hover伪类来设置鼠标滑过二级导航栏的效果，当鼠标滑过一级导航栏的li元素时，ul ul元素（即二级导航栏）将显示出来。