看到网站的导航按钮很炫酷不会怎么办本片教程介绍如何使用css制作网站导航横排二级下拉菜单 打开Notepad++，先输入个页面框架 DOCTYPE html html xmlns=#34#34 hade hade body body 框架好了，那么就该定义页面的title，关键词keyword，和描述description meta。

如果这样带入图片，显示的效果是这样的四张图片因为是在块状标签里面，所以是竖排排列的 现在对大盒子以及里面的图片进行简单的一点修饰设置宽高，添加描边 现在效果是这样的 然后对div添加上浮动标签floatleft这时候图片就发生变化了，竖排变成横排了，因为浮动的原因，最外面的边框仅剩一条线了。

7查看效果把html文件保存后，使用浏览器打开即可看到横向导航菜单效果如图1a标签既可以当作链接符号来用，本身也是行内标签的一种，直接用a标签输入文字，可以直接在横排显示2可以做出如图所示效果，横排显示的导航3如果想要对整体的导航进行移动位置，可以对整个的a标签添加上一个大的盒。

让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了下面是简单的代码实现，仅供参考ltstyle* margin0px padding0pxli liststyle width100px height30px fontsize14px textalignleft lineheight30px border1px solid #000。

ltlixxltli ltlixxltli ltlixxltli ltul 编辑li标签的css样式 floatleft代表的是元素左对齐这样li标签就可以横排显示了，liststyle用来去除li标签前面的小圆点一个网页对应多个HTML文件，超文本标记语言文件以htm磁盘操作系统DOS限制的外语缩写为扩展名或html外语缩写。

这就是浏览器兼容的问题了，这是每个前端开发都必须过的一关给左边一个宽度值即可，建立给在td里，也就是在上面那个td里增加style=quotwidth150pxquot。