CSS导航菜单--会跳起的多彩菜单

这里来实现跳起的效果。是基于前一例的制作过程，让菜单跳起时，就是让菜单项在鼠标指针式，使菜单文字所在的p段落变高一些。

1,首先改造HTML。在每个li中，增加一个div，把类别名设为“pad”，即垫子的意思，代码如下：

 <li>
     <a href="#">
        <div class="pad"></div>
        <div class="row1"></div><div class="row2"></div>
        <div class="row3"></div><div class="row4"></div>
        <p>Home</p>
        </a>
    </li>

这里只做一个，其他几个都是相同的

对这个垫子，div设置css样式，代码如下：

.item .pad{
 height:10px;
 border:0;
 background:transparent;
}

分别设置“垫子”和p段落在鼠标经过的样式，代码如下。

.item a:hover .pad{
 height:0px;
}

这样就可以正确实现跳起的效果了

下面就是实现多彩效果了，若想每个菜单项不能颜色显示，就要在每个li的类别中增加一个累的别名

例如

 <li class="item orange">
     <a href="#">
        <div class="pad"></div>
        <div class="row1"></div><div class="row2"></div>
        <div class="row3"></div><div class="row4"></div>
        <p>Home</p>
        </a>
    </li>

想让第一个菜单项以黄色显示，其他几项也同样的处理。

设置鼠标响应时代码如下：

.orange p,.orange .row2,.orange .row3,.orange .row4{
 background:#fa0;
}
.orange a:hover p,.orange a:hover .row2,.orange a:hover .row3,.orange a:hover .row4{
 background:#fa0;
}
.yellow p,.yellow .row2,.yellow .row3,.yellow .row4{
 background:#ff0;
}
.yellow a:hover p,.yellow a:hover .row2,.yellow a:hover .row3,.yellow a:hover .row4{
 background:#ff0;
}
.green p,.green .row2,.green .row3,.green .row4{
 background:#0e0;
}
.green a:hover p,.green a:hover .row2,.green a:hover .row3,.green a:hover .row4{
 background:#0e0;
}
.blue p,.blue .row2,.blue .row3,.blue .row4{
 background:#0cf;
}
.blue a:hover p,.blue a:hover .row2,.blue a:hover .row3,.blue a:hover .row4{
 background:#0cf;
}
.red p,.red .row2,.red .row3,.red .row4{
 background:#F00;
}
.red a:hover p,.red a:hover .row2,.red a:hover .row3,.red a:hover .row4{
 background:#F00;
}

这样就实现了最终的效果，如图：