关于一个鼠标移上和移开的特效求解

http://www.gzzt8888.com/2/fg.html  地址就是这个  ，打开地址就会看到导航的首页，鼠标放在首页这两个字上面，下面会出现蓝色的一块，这个可以做出来，问题就是鼠标离开，我要写的是，鼠标从首页这个栏目或者下面蓝色那一块离开，那么，蓝色那一块会消失，请大神解答！

解决方案 »

  1.   

    这个用 css a:hover 来实现,你把  蓝色的一块包在 A 下
      

  2.   

    写了个简单的例子你参考一下<!DOCTYPE html>
    <html>
    <head>
     <style>
        #nav a{
    height:30px;
    line-height:30px;
    text-align:center;
    width:100px;
    display: block;
    background:#ff2887;
    position: relative
       
        }
        li,ul{ list-style:none; }
        #nav a div{
         position: absolute;
         width:100px;
         top:28px;
         background:#2887ff; 
         display:none;
         color:#fff;
        }
        #nav a:hover div{
       display:block;
        }    
    </style>
    <div id="nav" >
    <a href="#">首页
    <div>
    <li>11</li>
    <li>222</li>
    </div>
    </a>
    </div>
     
    </body>
    </html>
      

  3.   


    <style>
    div,ul,li{margin:0;padding:0}
    #div2{display:none;margin-top:2px;}
    ul#ul1 li{float:left;width:100px;line-height:30px;text-align:center;margin-left:1px;background-color:yellow;}
    ul#ul1 li.second{height:30px}
    ul#ul1 li.first:hover #div2{display:block}
    #div2 ul#ul2 li{height:30px;line-height:30px;width:100px;margin-top:2px;background-color:red}
    #div2 ul#ul2 li:hover{background-color:#fff}
    </style><div class="nav">
    <ul id="ul1">
    <li class="first"><a href="#">首页</a> 
    <div id="div2">
    <ul id="ul2">
    <li><a href="#">子菜单1</a></li>
    <li><a href="#">子菜单2</a></li>
    <li><a href="#">子菜单3</a></li>
    </ul>
    </div>
    </li>
    <li class="second"><a href="#">风格展示</a></li>
    <li class="second"><a href="#">活动专题</a></li>
    </ul>
    </div>