老师,下拉菜单不显示

老师,下拉菜单不显示

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="css/css.css">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript" src="js/js.js"></script>

</head>

<body>

<!--top区域-->

<div class="biger">

<div class="top">

<div class="denglu">

<span style="color: red"><a>亲,请登录</a></span>

<span><a>免费注册</a></span>

<span><a>手机光慕淘</a></span>

</div>

<div class="menu">

      <div class="menu1"><a href="#">我的慕淘</a><img src="img/icon/21.png">

       <div class="menuactive">

       <span>已买到的宝贝</span>

       <span>我的足迹</span>

       </div>

   </div>

      <div class="menu1"><a href="#">收藏夹</a><img src="img/icon/21.png">

       <div class="menuactive">

       <span>收藏的宝贝</span>

       <span>收藏的店铺</span>

       </div>

      </div>

      <div class="menu1"><a href="#">商品分类</a><img src="img/icon/21.png">

       <div class="menuactive">

       </div>

      </div>

      <div class="menu1"><a href="#">卖家中心</a><img src="img/icon/21.png">

       <div class="menuactive">

       <span>免费开店</span>

       <span>已卖出的宝贝</span>

       <span>出售中的宝贝</span>

       <span>卖家服务中心</span>

       <span>卖家培训中心</span>

       <span>体验中心</span>

       </div>

      </div>

      <div class="menu1"><a href="#">联系客服</a><img src="img/icon/21.png">

       <div class="menuactive">

       <span>消费者客服</span>

       <span>卖家客服</span>

       </div>

      </div>

</div>

</div>

<!--logo区域-->

<div class="logo">

<div class="logoimg"><a href="#"><img src="img/logo.png"></a></div>

<div class="logotext">

<input type="text" name="text" placeholder="灵魂美食一元抢"><button>搜索</button>

</div>

<div class="shopping"></div>

</div>

<!--导航区域-->

<div class="daohang"></div>

<!--banner区域-->

<div class="banner"></div>

</div>

</body>

</html>



*{

padding: 0;

margin: 0;

text-decoration: none;

    font-family:"微软雅黑";

}

.biger{

width: auto;

height: auto;

overflow: hidden;

}


/*top区域样式*/

.top{

width: 1100px;

margin: 0 auto;

border-bottom: solid black 0.5px;

height: 30px;

overflow: hidden;

background: #f3f5f7;

}

.denglu{

float: left;

line-height:30px;

margin-left: 20px;

font-size: 10px;

}

.denglu span{

margin-right: 20px;


}

.denglu a:hover{

color: red;

cursor: pointer;

}

.menu{

float: right;

margin-right: 20px

}

.menu1{

float: left;

font-size: 10px;

line-height:30px;

margin-right: 20px;

width: 80px;

text-indent: 5px;


}

.menu1>a:hover{

color: red

}

.menu1:hover{

background: white;

border:#bbb solid 0.5px;

}

.menu img{

width: 10px;

height: 10px;

margin-left: 3px;

}

.menuactive{

display: none;

}

.menuactive span{

 display: block;

}

.menuactive>span:hover{

background: #cdd0d4;

cursor: pointer;


}

/*logo区域样式*/

.logo{

width: 1100px;

height: 100px;

margin: 0 auto;

background: #f3f5f7;

overflow: hidden;

}

.logoimg{

float: left;

display: inline-block;

line-height: 100px;

}

.logotext{

float: left;

line-height:100px;

margin-left:50px;

}

.logotext>input{

width: 400px;

height: 30px;

}

.logotext>button{

height: 34px;

width: 40px;

background: black;

color: white;

border: none;


}

.shopping{

width: 150px;

height: 30px;

float: right;

margin:30px;

background: red;


}



$(function(){


function aa(){

     var index=0;

     var menu1=$('.menu1');

     var menu=$('.menu');

     menu1.mouseover(function(){

      $(this).find('div').css('display','block')

     })

     menu1.mouseout(function(){

      $(this).find('div').css('display','none')

     })

}

aa()

})


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2019-01-18 10:08:53

你好同学 , 因为顶部整体设置了超出隐藏 ,如下:

http://img1.sycdn.imooc.com//climg/5c4133f50001938d17860623.jpg

所以当下拉菜单显示的时候 ,因为它超出了top盒子 , 所以把它隐藏了 . 这里建议去掉如下红框中属性 , 并且因为下拉菜单显示时在正常的文档流中会把下面的内容挤下去 ,所以建议为下拉菜单设置定位 , 然后设置偏移让它显示在一级菜单下面:

http://img1.sycdn.imooc.com//climg/5c4135210001567f06640499.jpg

样式美观上可以在根据效果图完善一下哦 , 祝学习愉快 ,望采纳 .

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师