[分享]css做二级导航栏横向

CSS是网页制作中经常用到的样式表语言之一。通过CSS可以对网页内容进行美化、布局等各种操作。其中二级导航栏横向就是CSS中常用到的一个布局。下面就简单介绍一下如何使用CSS实现二级导航栏横向效果。n...

CSS是网页制作中经常用到的样式表语言之一。通过CSS可以对网页内容进行美化、布局等各种操作。其中二级导航栏横向就是CSS中常用到的一个布局。下面就简单介绍一下如何使用CSS实现二级导航栏横向效果。

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

nav ul li{
  float:left;
  position:relative;
}

nav ul li a{
  display:block;
  padding:0 10px;
  line-height:60px;
  background-color:#fff;
  color:#333;
  text-decoration:none;
}

nav ul li:hover>a{
  background-color:#333;
  color:#fff;
}

nav ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

nav ul ul li{
  float:none;
  background-color:#333;
}

nav ul ul li a{
  line-height:40px;
  padding:0 20px;
  color:#fff;
}

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

上面的代码中，我们首先定义了一个没有样式的ul列表，包裹整个导航栏。然后再设置每一个li元素具有浮动以及相对定位。结合ul中没有间距的设置以及所有li浮动后，实现了一排横向导航栏的效果。在每一个li元素中，我们又 包裹了一个a标签来实现每一个导航项目的文字。当鼠标经过一个导航栏项目时，我们使用伪类的方式将对应的a标签背景色和字体颜色进行更新，方便用户辨识。下一步，我们在li元素中嵌套一个二级ul标签并设置其为绝对定位以及从父元素底部开始，这样就可以让二级导航栏悬浮在主导航之下了。最后，我们对二级导航栏进行一些简单的样式调整，如让每一个li元素取消浮动并设置背景色及颜色。

在每一个一级导航栏项目下新增了二级导航栏后，我们需要隐藏二级导航栏，只在鼠标悬停在一级导航栏项目时显示。我们通过对二级导航栏的display属性进行动态修改，来实现这一效果。当鼠标停留在一级导航栏项目上时，我们就将其对应的二级导航栏设为显示，实现悬浮效果。同时，由于此时鼠标已经不能点击一级导航栏项目了，因此我们也不需要为二级导航栏设置链接，只需要通过二级导航栏元素下的a标签来设置文字即可。

总之，通过上述CSS的设置，我们成功实现了一排横向的二级导航栏。希望这篇文章能够对您在网站制作中遇到的类似问题有所帮助。