一.将ul块级元素转为行内元素

通过display: inline-block设置为行内元素。

没有转换的效果：

加上代码 display: inline-block 后的效果

二.美化导航栏 用伪类选择器

代码参考

三.改进增加二级菜单

增加二级菜单

用法就是

ul <li

li里面 在套 ul<li标签

一级标签要转成行内 元素

并切要固定不能让二级标签给顶的错位了

参考代码

四.竖型的导航

这个也很简单 不转换成行内元素即可实现

具体美观问题自己进行调试即可

代码参考

资源下载