老师，请问一下。
来源：5-2 作业题
aleeeeex
2018-11-07 11:53:09
为什么我的顶部右侧导航栏的二级菜单被挡住了，给top（顶部的最大div）设置了高度，里面子元素（二级菜单）不是应该超出的溢出来吗？，如何实现效果，老师能提供一下思路吗？
以下是代码：
HTML：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>幕淘网</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <!--顶部--> <div class="top"> <!--顶部的左边--> <div class="topLeft"> <p class="login">亲，请登录</p> <p class="register">免费注册</p> <p class="phone">手机逛幕淘</p> </div> <!--弹出层遮罩--> <div id="layer-mask" class="layer-mask"></div> <!--弹出层窗体--> <div id="layer-top" class="layer-top"> <!--弹出层窗体的关闭按钮--> <div class="layer-close">×</div> <!--弹出层窗体的内容--> <div ld="layer-content" class="layer-content"> <div class="layer-title"> <div class="login-btn">登录</div> <div class="register-btn">注册</div> <div class="clear"></div> </div> <!-- 登录界面内容 --> <div class="layer-main"> <div class="login-main"> <div class="item"> <input id="username" class="input" type="text" name="username" placeholder=" 请输入登录邮箱或手机号"> <p class="error-msg"></p> </div> <div class="item"> <input id="password" class="input" type="password" name="password" placeholder=" 6-16位密码，区分大小写，不能使用空格"> <p class="error-msg2"></p> </div> <div class="item"> <input type="checkbox" name="checkbox" class="checkbox"> <span>下次自动登录</span> <a href="#">忘记密码</a> </div> <div class="item"> <input class="submit" type="submit" name="submit" value="登录"> </div> <div class="item icon"> <img src="images/icon/QQ.png"> <img src="images/icon/xinlang.png"> <img src="images/icon/weixin.png"> </div> </div> <!-- 注册界面内容 --> <div class="register-main"> <div class="item2"> <input id="username2" type="text" name="username2" placeholder=" 请输入注册邮箱或手机号"> <p class="error-msg3"></p> </div> <div class="item2 verifyCode"> <input id="vcode" type="text" name="vcode" placeholder=" 请输入验证码"> <img src="images/verify.png" alt=""> <p class="error-msg4"></p> </div> <div class="item2"> <input class="submit2" type="submit" name="submit" value="注册"> </div> <div class="icon"> <img src="images/icon/QQ.png"> <img src="images/icon/xinlang.png"> <img src="images/icon/weixin.png"> </div> </div> </div> </div> </div> <!--顶部的右边--> <div class="topRight"> <ul> <li class="nav-li"> <div class="tit"> 我的慕淘 <img src="images/icon/21.png"> </div> <ul> <li>已购买的宝贝</li> <li>我的足迹</li> </ul> </li> <li class="nav-li"> <div class="tit"> 收藏夹 <img src="images/icon/21.png"> </div> <ul> <li>收藏的宝贝</li> <li>收藏的店铺</li> </ul> <li class="nav-li"> <div class="tit"> 商品分类 <img src="images/icon/21.png"> </div> <ul> <li>好货</li> <li>烂货</li> </ul> </li> <li class="nav-li"> <div class="tit"> 卖家中心 <img src="images/icon/21.png"> </div> <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体验中心</li> </ul> </li> <li class="nav-li"> <div class="tit"> 联系客服 <img src="images/icon/21.png"> </div> <ul> <li>消费者客服</li> <li>卖家客服</li> </ul> </li> </ul> </div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <!--插入js文件--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="js.js"></script> </body> </html>
CSS：
*{
padding: 0;
margin:0;
}
li{
text-decoration: none;
list-style: none;
}
a{
text-decoration: none;
color:grey;
}
body{
width: 1000px;
margin:0 auto;
}
.top{
width: 100%;
border-bottom: 1px solid grey;
font-size: 12px;
color:grey;
overflow: hidden;
background: #eee;
height: 40px;
}
.topLeft{
float: left;
}
.login,.register,.phone{
float: left;
margin-left: 20px;
padding: 12px 0px;
line-height: 20px;
cursor: pointer;
}
.login{
color:red;
}
/*定义右边导航的样式*/
.topRight{
float:right;
}
.nav-li{
width:75px;
float: left;
margin-right: 10px;
padding: 12px 0px;
line-height: 20px;
cursor: pointer;
}
.nav-li img{
width: 10px;
height:10px;
margin-left: 5px;
}
/*弹出层遮罩*/
.layer-mask{
z-index: 99999;
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
background-color: #000;
opacity: 0.5;
display: none;
}
/*弹出层窗体*/
.layer-top{
z-index: 100000;
position:fixed;
left: 0;
right:0;
top:0;
bottom: 0;
margin:auto;
width: 400px;
height: 350px;
background-color: #fff;
display: none;
}
.layer-close{
float: right;
width:20px;
height: 20px;
border: 2px solid #fff;
background: #eee;
line-height: 20px;
text-align: center;
position: absolute;
border-radius: 50%;
top:-10px;
right: -10px;
}
.layer-close:hover{
cursor: pointer;
color:#fff;
background: #ccc;
}
/*编写弹出层的登录和注册的css样式*/
.login-btn,.register-btn{
width:40px;
height:40px;
float: left;
text-align: center;
line-height: 40px;;
cursor:pointer;
font-size: 16px;
padding-top:20px;
padding-left: 30px;
}
.clear{
clear: both;
}
.login-btn:hover{
color:red;
}
.register-btn:hover{
color:red;
}
/*编写弹出层的登录内容样式*/
.login-main{
/*display: none;*/
}
.item{
margin:20px auto;
width:350px;
}
#username,#password{
width: 350px;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
}
.item a{
margin-left: 208px;
}
.submit{
background: #e40;
width:250px;
height:30px;
border-radius: 5px;
color:#fff;
margin-left:43px;
cursor: pointer;
}
.icon{
text-align: center;
}
.icon img{
cursor: pointer;
background:grey;
margin: 10px;
border-radius: 50%;
}
/*编写弹出层注册内容样式*/
.register-main{
display: none;
}
.item2{
margin: 20px auto;
width: 350px;
}
#username2{
width: 350px;
height: 30px;
border: 1px solid #ccc;
border-radius: 2px;
}
#vcode{
width:200px;
height: 30px;
border:1px solid #ccc;
border-radius:2px;
}
.verifyCode img{
width: 100px;
height: 30px;
margin-left: 44px;
vertical-align: middle;
}
.verifyCode{
}
.submit2{
background: #e40;
width:250px;
height:30px;
border-radius: 5px;
color:#fff;
margin-left:43px;
cursor: pointer;
}JS:
$(function(){
//点击亲，请登录链接事件
$('.login').click(function(){
//点击登录把遮罩层以及登录窗体通过.show方法显示
$('#layer-mask').show();
$('#layer-top').show();
//调用登录界面显示函数
loginShow();
//点击弹出层上登录字样调用登录界面显示函数
$('.login-btn').click(function(){
loginShow();
});
//点击弹出层上注册字样调用注册界面显示函数
$('.register-btn').click(function(){
registerShow();
});
//点击关闭按钮，把遮罩层以及登录窗体隐藏
$('.layer-close').click(function(){
$('#layer-mask').hide();
$('#layer-top').hide();
$('.error-msg2').html(' ');
$('.error-msg').html(' ');
$('#username').val('');
$('#password').val('');
$('.error-msg3').html(' ');
$('.error-msg4').html(' ');
$('#username2').val('');
$('#vcode').val('');
});
});
//点击免费注册链接事件
$('.register').click(function(){
//点击登录把遮罩层以及登录窗体显示
$('#layer-mask').show();
$('#layer-top').show();
//调用注册界面显示函数
registerShow();
//点击弹出层上登录字样调用登录界面显示函数
$('.login-btn').click(function(){
loginShow();
});
//点击弹出层上注册字样调用注册界面显示函数
$('.register-btn').click(function(){
registerShow();
});
//点击关闭按钮，把遮罩层以及登录窗体隐藏
$('.layer-close').click(function(){
$('#layer-mask').hide();
$('#layer-top').hide();
});
})
//以下皆为函数定义区
//定义弹出登录界面的函数
function loginShow(){
//然后把登录界面内容显示，把注册界面隐藏
$('.login-main').show();
$('.register-main').hide();
$('.login-btn').css({'color':'red'});
$('.register-btn').css({'color':'grey'})
//调用检查登录输入的函数
checklogin();
}
//定义将弹出注册界面的函数
function registerShow(){
//把注册界面内容显示，把登录界面隐藏
$('.login-main').hide();
$('.register-main').show();
$('.login-btn').css({'color':'grey'});
$('.register-btn').css({'color':'red'});
//调用检查注册输入的函数
checkregister();
}
//定义检查用户注册输入是否正确的函数
function checkregister(){
$('.submit2').click(function(){
var username2=$('#username2').val();
var vcode=$('#vcode').val();
if (username2.length===11) {
return ture;
}
else{
$('.error-msg3').html('请输入正确的手机号或邮箱账号');
$('.error-msg3').css({color:"red"});
}
if (vcode==='GYyd') {
return ture;
}
else{
$('.error-msg4').html('请输入正确的验证码');
$('.error-msg4').css({color:'red'});
}
});
}
//定义检查用户登录输入是否正确的函数
function checklogin(){
$('.submit').click(function(){
var username=$('#username').val();
var password=$('#password').val();
if (username.length===11) {
return ture;
}
else{
$('.error-msg').html('请输入正确的手机号或邮箱账号');
$('.error-msg').css({color:"red"});
}
if(password.length==6){
return ture;
}
else{
$('.error-msg2').html('请输入正确的密码');
$('.error-msg2').css({color:"red"});
}
});
}
});写回答
2回答
-
你好同学 , 因为代码中设置了如下属性 , 超出会隐藏 :
如上属性可以去掉 , 并且建议下拉菜单 ,使用定位设置它的位置:
下拉菜单父元素设置如下 ,是下拉菜单参照其定位:
增加如下代码 , 给下拉菜单设置定位:
整体的盒子可以设置如下 ,是border也计算在盒子的宽高中 :
另外 ,根据效果图 ,在完善一下下拉菜单的其他样式 . 祝学习愉快 ,望采纳
0h018-11-07 -
好帮手慕夭夭
2018-11-07
同学的意思是下拉菜单的边框会盖住菜单的边框吗 ? 可以给下拉菜单的上边框单独去掉 , 设置border-top:none ;
如果没有解决你的疑惑 , 建议同学先把能做好的样式写完 ,然后重新提问一下 , 把自己的代码上传 , 并把问题在详细描述一下. 以便老师定位问题 .
祝学习愉快 !
0
相似问题