求大神帮忙看下代码?实现不出来二级菜单移出

来源:2-5 悬浮层制作

qq_xsg

2017-04-21 17:09

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.head{ height:60px;}
.headd li{
            height: 60px;
            width:90px;
            display:block;
            float:right;
            line-height: 60px;
            font-size: 11pt;
            list-style-type: none;
            text-align:center;
            
        }
.lia{
    height: 30px;
    width:90px;
    display:block;
    float:left;
    padding-top:15px;
    padding-left:15px
    }
    
.headd li a{
            text-decoration: none;
            color:#999;
            font-size:15px;
            font-family:"Microsoft YaHei";
        }
.headd li:hover{
    border-bottom:1px solid #999;
    }
.headd a:hover{color:#666}
.cpflei{
    width:90px;
    height:120px}    
.cpflei li{
    width:180px;
    height:55px;
    display:block;
    text-align:center;
    list-style-type:none;
    border-bottom:1px solid #F8F7F5;
    border-left:1px solid #F8F7F5;
    border-right:1px solid #F8F7F5;
    box-shadow:0 0 1px #F8F7F5;
    -moz-box-shadow:0 0 1px #F8F7F5;
    -webkit-box-shadow:0 0 1px #F8F7F5;
    z-index:4;}
.cpflei li a{
            text-decoration: none;
            line-height:55px;
            color:#999;
            font-size:15px;
            font-family:"Microsoft YaHei";
            text-align:center;
        }
.hx{
    border-top:1px solid #999}
/*.cpflei{
    display:none}
.headd li:hover .cpflei{
    display:block}*/

</style>
</head>

<body>

 <div class="headd">
    <li><a href="#">联系</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">资讯</a></li>
    <li><a href="#">产品</a>
      
        <ul class="cpflei">
          <li class="hx"><a href="#">零食电心</a></li>
          <li><a href="#">乳制品</a></li>
          <li><a href="#">汤羹</a></li>
          <li><a href="#">肉蛋类</a></li>
        </ul>
      
    </li>
    <li><a href="#">首页</a></li>
  </div>
</div>
</body>
</html>


写回答 关注

2回答

  • qq_xsg
    2017-04-23 15:04:01

    http://img.mukewang.com/58fc518200015ea801940282.jpg一级导航和二级导航留空的效果,加个margin后移到一级菜单是弹出来二级菜单了,可是却移不到二级菜单,一下移到空白哪里二级菜单就隐藏了

  • 超人不会飞Mark
    2017-04-22 17:18:04

    /*.cpflei{
        display:none}
    .headd li:hover .cpflei{
        display:block}*/


    这个注释放开不就显示了2级菜单吗?


    qq_xsg

    有问题,注释放开后会发现移到一级菜单的时候是弹出来了,可是移不到二级菜单

    2017-04-23 10:30:00

    共 1 条回复 >

商城分类导航效果

两种方法实现分类导航,同时扩展讲解其它商城分类导航的制作方法

63737 学习 · 276 问题

查看课程

相似问题