1、第一步，打开软件Adobe Dreamweave CS6，创建一个新的HTML第二步，在工作区域body用标签 ul 和 li 输入导航的内容第三，编辑样式CSS在标签之间写入样式表，第四，紧接上一步由于无线序列具有默认样式，前；然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面 最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色；1修改导航分类下面的背景色，代码如下skinboxbd linkbackground#000000 修改导航分类下面的图片，代码如下skinboxbd linkbackgroundurl图片链接 2修改整个导航的背景色 skinboxbd menu；本人亲测下面这些代码是可以实现二级或多级导航菜单的 lt！ margin0pxpadding0px body overflowscrollfontsize12pxfontfamilyArial， Helvetica， sansserifcolor#000 a fontsize12pxfont；3在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏4将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化5也可以制作成水平导航栏，overflow hidden代码的意思是超出高度和宽度的部分。

2、这里是导航所在的DIV容器 CSS代码nav positionfixed * 绝对定位，fixed是相对于浏览器窗口定位 * top0 * 距离窗口顶部距离 * left0 * 距离窗口左边的距离 * width100% * 宽度设置为100；设置3个导航nav，最右边的nav设置class=right，然后设置nav的css边距，宽，高，背景颜色便于我们看见，再设置一个float为右就会靠右排列，注意float时第一个会到右边，所以设置第一个为最右边的导航栏 代码 lt！DOCTYPE；2通过列表制作ulul 3导航条的DIV样式设置 4important实现对不同的浏览器设值，列表项样式 5但这样看起来还是没有任何效果，只是显示文本一样为此，我们就需要在lili标签中嵌套a超链接标签，超链接标签。

3、aawidth100pxheight20pxbodersolid1px#f00定义搜索框的大小高度以及边框颜色思路是放大镜图标用个img写进来或者用其它标签用CSS做背景也可以下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着；1登陆淘宝卖家中心，进入淘宝店铺装修后台页面，鼠标放在导航栏位置，出现编辑窗口，2点击编辑，找到“显示设置”，点击后看到白框就是CSS自定义框3将我们上面提供的透明代码复制进去，导航栏就会透明显示了 简单的淘宝；3将下面对应的透明代码复制进去，导航栏就会透明显示如图A简单的淘宝新旺铺自定义CSS导航透明背景代码skinboxbdbackground menulistbackgroundlinkbackground menubackground。

4、设置导航条内的“所有分类”*所有分类背景色* allcats linkbackground repeat scroll 0 0 #00ad08 *所有分类文字样式* allcats titlecolor#颜色代码fontsize字号px 修改“所有宝贝”；所有代码 ！DOCTYPE html html head meta charset=#34UTF8#34 title横向导航菜单title style type=#34textcss#34 nav li backgroundcolor red padding 8px 15px float left liststyle；浏览器首页 * 网页样式 * body fontfamily Arial， sansserifmargin 0padding 0 container maxwidth 1024pxmargin 0 autopadding 20px h1 fontsize 36pxtextalign center；css中导航条设置1二个简单的菜单导航条示例代码 这篇文章主要介绍了二个简单的菜单导航条示例，需要的朋友可以参考下，使用代码案例详解导航条设置，简单明了的代码可以做到举一反三效果2CSS实现导航条Tab切换的三种方法。