JollyLee1127 2015-01-26 08:33 采纳率: 0%
浏览 2466
已采纳

导航栏的横向下拉菜单

图片说明
为什么我的下拉菜单不隐藏啊,
求高手啊

  • 写回答

6条回答 默认 最新

  • Go 旅城通票 2015-01-27 01:57
    关注

    你默认的就是显示的啊。。增加下面2个样式,默认隐藏,li:hover的时候再显示出来

     .menu2_div{margin:0px;font-size:13px;display:none}/*默认隐藏*/
    .menu2 li:hover .menu2_div{display:block}/*hover时在显示*/
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • JollyLee1127 2015-01-27 01:42
    关注

    .menu2{float:left;font-size: 16px;font-family: "微软雅黑";width: 760px;}
    .menu2 ul{margin:0px;padding:0px;list-style-type:none;}
    .menu2 ul li{float:left;text-align:center;width:119px;}
    .menu2 ul li a{display:block;text-decoration:none;color:#000000; width:119px; height:40px;line-height:40px;}
    .menu2 ul li:hover a{color:#FFFFFF;background:#FF6600;text-decoration:none;}
    .menu2_div{margin:0px;font-size:13px;}
    .menu2 ul li ul{width:476px;list-style-type:none;}
    .menu2 ul li ul li{float:left;width:119px;text-align:center;}
    .menu2 ul li:hover ul li a{background:#FF6600;color:#FFFFFF; width:119px;text-decoration:none;}
    .menu2 ul li:hover ul li a:hover{background:#FF9900;color:#FFFFFF;text-decoration:none;}
    .menu2 ul li a.current{background:#FF6600;color:#FFFFFF;}

     <div class="menu2">
            <ul>
              <li><a href="#" class="current">首页</a></li>
              <li><a href="#">中心介绍</a>
              <div class="menu2_div">
                <ul>
                  <li><a href="#">中心概况</a></li>
                  <li><a href="#">中心概况</a></li>
                  <li><a href="#">中心概况</a></li>
                  <li><a href="#">中心概况</a></li>
                </ul>
              </div>
              </li>
              <li><a href="#">实践教学</a>
              <div class="menu2_div">
                <ul>
                  <li><a href="#">教学理念</a></li>
                  <li><a href="#">教学理念</a></li>
                  <li><a href="#">教学理念</a></li>
                  <li><a href="#">教学理念</a></li>
                </ul>
              </div>
              </li>
              <li><a href="#">教学管理</a>
              <div class="menu2_div">
                <ul>
                  <li><a href="#">成果展示</a></li>
                  <li><a href="#">成果展示</a></li>
                  <li><a href="#">成果展示</a></li>
                  <li><a href="#">成果展示</a></li>
                </ul>
              </div>
              </li>
              <li><a href="#">管理制度</a>
              <div class="menu2_div">
                <ul>
                  <li><a href="#">规章制度</a></li>
                  <li><a href="#">规章制度</a></li>
                  <li><a href="#">规章制度</a></li>
                  <li><a href="#">规章制度</a></li>
                </ul>
              </div>
              </li>
              <li><a href="#">学院管理</a>
              <div class="menu2_div">
                <ul>
                  <li><a href="#">管理学院</a></li>
                  <li><a href="#">管理学院</a></li>
                  <li><a href="#">管理学院</a></li>
                  <li><a href="#">管理学院</a></li>
                </ul>
              </div>
              </li>
            </ul>
          </div>
    
    
    
    
    
    评论
  • JollyLee1127 2015-01-26 08:35
    关注

    .menu2{float:left;font-size: 16px;font-family: "微软雅黑";width: 760px;}
    .menu2 ul{margin:0px;padding:0px;list-style-type:none;}
    .menu2 ul li{float:left;text-align:center;width:119px;}
    .menu2 ul li a{display:block;text-decoration:none;color:#000000; width:119px; height:40px;line-height:40px;}
    .menu2 ul li:hover a{color:#FFFFFF;background:#FF6600;text-decoration:none;}
    .menu2_div{margin:0px;font-size:13px;}
    .menu2 ul li ul{width:476px;display:none;}
    .menu2 ul li ul li{float:left;width:119px;text-align:center;}
    .menu2 ul li:hover ul li a{background:#FF6600;color:#FFFFFF; width:119px;text-decoration:none;}
    .menu2 ul li:hover ul li a:hover{background:#FF9900;color:#FFFFFF;text-decoration:none;}
    .menu2 ul li a.current{background:#FF6600;color:#FFFFFF;}

    • 首页
    • 中心介绍
            </li>
            <li><a href="#">实践教学</a>
            <div class="menu2_div">
              <ul>
                <li><a href="#">教学理念</a></li>
                <li><a href="#">教学理念</a></li>
                <li><a href="#">教学理念</a></li>
                <li><a href="#">教学理念</a></li>
              </ul>
            </div>
            </li>
            <li><a href="#">教学管理</a>
            <div class="menu2_div">
              <ul>
                <li><a href="#">成果展示</a></li>
                <li><a href="#">成果展示</a></li>
                <li><a href="#">成果展示</a></li>
                <li><a href="#">成果展示</a></li>
              </ul>
            </div>
            </li>
            <li><a href="#">管理制度</a>
            <div class="menu2_div">
              <ul>
                <li><a href="#">规章制度</a></li>
                <li><a href="#">规章制度</a></li>
                <li><a href="#">规章制度</a></li>
                <li><a href="#">规章制度</a></li>
              </ul>
            </div>
            </li>
            <li><a href="#">学院管理</a>
            <div class="menu2_div">
              <ul>
                <li><a href="#">管理学院</a></li>
                <li><a href="#">管理学院</a></li>
                <li><a href="#">管理学院</a></li>
                <li><a href="#">管理学院</a></li>
              </ul>
            </div>
            </li>
          </ul>
        </div>
      
    评论
  • ZSC_LM 2015-01-26 09:13
    关注

    用的JS吗,是不是只加了onmouseover没有加onmouseout

    评论
  • Go 旅城通票 2015-01-26 09:31
    关注

    重新发你的代码,记得用工具栏上的&lt;/&gt;格式化一下,要不看不到源代码。。

    评论
  • ZSC_LM 2015-01-26 09:45
    关注

    好吧。。原来这是提问出来的代码。。我还以为是回答呢。。
    .menu2 ul li a{display:block;
    这一行限定死了,display:block 当然就不会隐藏下拉菜单中的这些内容了
    想要实现hover效果可以简单的加几句JS,改变display属性

    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥15 PCL注册的选点等函数如何取消注册
  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 代码已写好,求帮我指出错误,有偿!
  • ¥15 matlab+波形匹配算法
  • ¥15 转录组分析做聚类树图时癌旁组被分到了癌组
  • ¥15 大一Python字典
  • ¥15 multisim电路设计(相关搜索:设计报告)
  • ¥15 PC-lint Plus