这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的；样式代码改成这样 ul， li margin 0px padding 0px ul liststyle a fontsize 12px color #000000 textdecoration navWrapper width 100px height 30px。

打开Notepad，先输入一个页面框架好了，接下来就该定义页面的标题关键词描述了content=；1编写带有div导航的html代码2使用class=“nav”属性的‘div’标签作为菜单的容器在截图中，在图示的HTML代码中，一个简单的无序列表ul来表示主菜单项3在主菜单区域中添加链接在本步骤中，在无序列表。

首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示因为菜单栏；请看如下调用jquery的j显示子菜单的代码quot#menu_2quothoverfunction quotsub_menu_2quotshow，function *这里就是out事件* quotsub_menu_2quothide剩下的就是样式的问题了。

先在网站的head模板添加二级菜单的html代码，如下 添加之后前台就可以显示二级菜单，但会出现乱码，然后找到相应的css文件，在*nav*部分，加入以下代码，具体风格可以自己改，navulliulpositionabsolutedisplay；一二级菜单不下来原因有以下方面1HTML代码各层级嵌套错误2CSS样式控制中没有使用定位属性3定位数值计算错误二正确的解决方案 1清晰的HTML代码层级，如下ltul class=quotmenuquot ltli class=quotnavquot。

如何使用css布局水平导航栏 如果是导航菜单，可以用ul不必要列表制作同时在CSS中使用floatleft控制李向左浮动实现水平菜单请注意，UL或UL的父容器的宽度必须大于所有li宽度的总和例如 html怎么把一行图片变两行横向排列。

给你个例子 lttitlediv css3 侧边菜单导航栏titleltstyle type=quottextcssquot*margin0padding0liststyletypea，imgborder0bodyfont12px180% Arial， Helvetica， sansserif；选择鼠标指针浮动在其上的元素，并设置其样式ahover backgroundcoloryellow 对于HTML 部分可以使用任何的 HTML 元素来打开下拉菜单，如ltspan， 或 a ltbutton 元素使用容器元素 如 ltdiv 来创建。

方法如下方法一HTML 1创建CSS菜单的HTML代码框架我们使用class=“nav”属性的‘div’标签作为菜单的容器在截图中，在图示的HTML代码中，一个简单的无序列表ul来表示主菜单项2在主菜单区域中添加链接在；最好是用JS做，但是非要用CSS呢，也可以如下是我以前写的一个CSS下拉，你可以参考一下lthtmlltheadlttitlelttitleltstyle*margin0padding0ul，liliststyletypepadding0margin0#nav li。

如图，制作导航条菜单一般是用一个div嵌套ul和li标签，然后li里面有a标签布局做好之后，开始写导航条的样式，如图，先清除导航条的margin和padding然后定位导航条的div，这里我就用绝对定位来居中，如果你有其他导航条居中；ltstylebody background#ffful，li margin0padding0liststyleh3 textaligncenter#nav fontsize12pxcolor#999#nav ul li heightautopadding4px 0textaligncenter。