一、导航条

1.网页中常出现的导航条：讲解导航条的制作；悬浮时，导航条其详细内容会显示，即其隐藏的子元素。

2.基本结构：

<div class="father">

  <div class="son"></div>

</div>

3. 基本样式：

.son

{

position: absolute;left: ;top: ;/*定位*/

display: none;/*隐藏*/

}

.father:hover

{

     display: block;/*悬浮时显示*/

}

注意：

定位类型：不能是相对定位relative，relative未脱离标准文档流；

使用relative定位效果如下：

二、引申：悬浮状态下改变内容

1. 基本结构：

<div class="one">

<div class="one-dis"></div>

</div>

<div class="two">

<div class="two-dis"></div>

</div>

<div class="three">

<div class="three-dis"></div>

</div>

2. 基本样式：

.one-dis,.two-dis,.three-dis

{position:absolute;left:px;top:px;/*定位*/

background-color: white} 

.one-dis

{z-index: 1;}

/*悬浮时层级改变*/

.one:hover .one-dis

{z-index: 2;}

.two:hover .two-dis

{z-index: 2;}

.three:hover .three-dis

{z-index: 2;}

注意：背景色设为白色以遮挡其他内容，将需显示的内容层级设为1（其余层默认为0）；

悬浮时改变其对应子级，即需显示内容的的层级关系，将其层级提高。