两种方法：行内元素(inline-block)和浮动(float)

行内元素

li默认是块内元素，前后有换行，设置成inline-block后，同时具有inline同行水平排列和block可以设置width等属性的特点。 不足：会有间隔，因为原本的block元素前后有换行，使用inline-block之后，元素之间会有间隔。如何解决看inline-block、block、inline分析。

浮动

css:

结构:

由于二级导航栏是水平的，要让多个li同行分布，按照水平基本导航栏的做法（1）float 或者（2）inline-block。注意一级导航要设置relative定位，二级导航设置absolute定位来脱离文档流，此时二级导航的宽度仍然受一级导航的限制（此时一级导航是距离最近的非static定位的元素），否则会有错位情况发生。

css改动:

css改动：

需要注意：如果display:none没有去掉，最后没有过渡效果，仍为瞬时显示。 这里的动画是通过opacity实现的，有不足：鼠标可以点击到看不见的导航项。

在一级li中添加二级ul，若二级要垂直的导航栏，则对二级ul float:none。

使用display: none将二级导航隐藏，这里隐藏式二级导航不占用位置，设置hover将display: block。

对整个导航栏加阴影，同时防止hover时二级导航栏拉伸阴影样式，需要将二级导航栏脱离普通文档。这里不能用float，因为一级导航栏已经清除了浮动，故这里用绝对定位脱离文档流。

可以对一级导航栏使用绝对定位，对html使用相对定位，效果不错。 CSS：

html：

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

display:block; (字面意思表现形式设为块级元素)

display:inline; (字面意思表现形式设为行内元素)

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。 HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。 在导航栏中可设置水平导航，与float相比没有浮动副作用。

虽然原理很清晰明了，但是实际做的时候总有很多意外情况，这里列举我遇到的关于导航栏的小demo，源自我自己的作业和小练习。

效果：

注意和关键：

代码：