老师,下拉菜单不显示
<!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
相似问题
登录后可查看更多问答,登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星