css如何搭建导航,如何利用css3样式搭建折叠导航？(一)

如何利用css3样式搭建折叠导航？

在“CSS样式中的块元素、行内元素与行内块元素”这篇文章中，我们介绍了有关于块元素、行内元素以及行内块元素的一些知识，那么如何利用css样式搭建折叠导航呢？

有的朋友可能会对折叠导航感到比较迷惑，不知道是什么意思，可以看看上图。当用手机来浏览咸鱼成长记这个网站的话，会发现其导航变成了如上图中红色箭头所指的红框里的菜单，用手指点一下就会弹出原来的导航列表了。那么这样的效果是如何实现的呢？

这里综合运用了html、css和javascript的知识，由于我不太会javascript，所以这里用html和css做一个类似的效果，即当鼠标滑过一级导航的时候，自动以下拉列表的形式显示二级导航，当鼠标移动到别的位置的时候，二级导航自动隐藏。

这个效果应该怎么做呢？用html5来构建内容，然后用css中的列表设置并使用伪类选择器就可以做到了。

首先来构建内容吧，这里导航就做两个部分吧：首页和内容。那么导航应该怎么做呢？首先需要放置导航的一个容器，这里用div，然后容器里的首页和内容怎么来书写呢？这里用无序列表(ul:unordered list)来书写吧,。书写完成后运行到浏览器中，效果图如下：

可以看到，内容已经搭建好了，但是显示样式距离我们想要的差很多，所以新建一个css样式表并用link标签将css样式与html文件链接起来。接下来就在css样式中来修改显示样式吧，那么怎么用css样式来控制呢？请看这篇文章：如何利用css样式搭建折叠导航？(二)