JollyLee1127
2015-01-26 08:33
采纳率: 40%
浏览 2.4k
已采纳

导航栏的横向下拉菜单

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 已采纳

    你默认的就是显示的啊。。增加下面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>
    
    
    
    
    
    评论
    解决 1 无用
    打赏 举报
  • 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

    评论
    解决 无用
    打赏 举报
  • 重新发你的代码,记得用工具栏上的&lt;/&gt;格式化一下,要不看不到源代码。。

    评论
    解决 无用
    打赏 举报
  • ZSC_LM 2015-01-26 09:45

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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题