老师,如何调试这个情况

老师,如何调试这个情况

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>裁床</title>

<link rel="stylesheet"  href="css/cccss.css" />

</head>

<body>

<div class="box">

<img src="img/logo.jpg" />

<div class="box-a">

<div class="d">

<ul  >

<li>登录</li>

<li>注册</li>

</ul>

</div>

<div class="sous">

<input type="text" autocomplete="off" id="kw" class="i"  name="word" placeholder="信息"  />

<input type="submit" log-click="p=5.41&" class="sb" value="搜索"/>

</div>

</div>

<div class="maii">

<ul>

<li>

<a href="/cg.html">采购订单</a>

</li>

<li  >

<a href="/ml.html">面料管理</a>

</li>

<li >

<a href="/mf.html">面辅料收货管理</a>

</li>

<li id="u2" class="u2">

<a href="/ccbb.html">生产计划进度报表</a>

<ul class="u3">

<li><a href="/cc.html">裁床</a></li>

<li><a  href="/ccbb.html">生产</a></li>

<li><a href="/ccbb.html">后道</a></li>

</ul>

</li>

</ul>

</div>

<div class="v">

<p style="margin-top:15px;">生产计划进度报表</p>

<div class="g">

<p>查询条件</p>

</div>

<div>

<form>

<table>

<tr>

<td class="xz">年份:</td>

<td>

<select class="sl">

<option>2018</option>

<option>2019</option>

<option>2020</option>

<option>2021</option>

</select>

</td>

</tr>


<tr>

<td class="xz">季节:</td>

<td>

<select class="sl">

<option>Q1</option>

<option>Q2</option>

<option>Q3</option>

<option>Q4</option>

</select>

</td>

</tr>

<tr>

<td class="xz">款号:</td>

<td><input  type="text"  name="word" placeholder="请输入采购款号" /></td>

</tr>

<tr>

<td class="xz">生产组:</td>

<td><input  type="text" name="word" placeholder="请输入生产组"/></td>

</tr>



</table>

</form>

</div>

</div>

<div class="hj">

<ul>

<li style="margin-left:20px"><a href="https://drive.wps.cn/">查询</a></li>

<li>详细计划</li>

<li>详细进度</li>

<li>下载</li>

</ul>

</div>

<div class="kf">

<ul>

<li>款号</li>

<li>开采时间</li>

<li>床号</li>

<li>款号</li>

<li>面料</li>

<li>色别</li>

<li>规格</li>

<li>层数</li>

<li>裁剪员</li>

<li>编号员</li>

<li>查货员</li>

</ul>

</div>

</div>

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

</html>

css:

@charset "utf-8";

/* CSS Document */


*{

margin:0;

padding:0;}

body{

font-family:"微软雅黑";

}

.box{

width:100%;

height:100%;

}

.box-a{

width:100%;

height:45px;

 }

 a{

text-decoration:none;

display:block;}

.d ul li{ float:right; line-height:22px; width:80px; text-align:center; margin-top:10px; list-style-type:none;}

.d ul li a{ font-size:14px;font-weight:bold; color:#890b11;}

.d ul li a:hover{ font-size:16px;color:#000;}

.d ul li ul li{

float:left;

margin:0;

width:155px;}

.d{

height:45px;

width:160px;

background:#0F0;

float:right;

margin-top:-65px;

}


.maii ul li{

display:block;

float:left;

list-style:none;

line-height:40px;

width:400px;

text-align:center;


}

.maii{

width:100%;

height:40px;

background:#999;

top:8px;}


.kf{

width:100%;

height:25px;

background:#999;}

.kf ul li{

float:left;

overflow:hidden;

width:170px;

line-height:25px;

font-size:14px;}

.hj{

width:100%;

height:25px;

}

.hj ul li{

float:left;

overflow:hidden;

width:80px;

margin-top:2px;}

.xz{

text-align:right;}

.sl{

width:154px}

.sous{

margin-top:20px;}

.ux li{

float:none;}


.v{

/*margin-top:120px;*/

background:#06C;

position:relative;}


ul li ul{

display:none;}

鼠标移到

@charset "utf-8";

/* CSS Document */


*{

margin:0;

padding:0;}

body{

font-family:"微软雅黑";

}

.box{

width:100%;

height:100%;

}

.box-a{

width:100%;

height:45px;

 }

 a{

text-decoration:none;

display:block;}

.d ul li{ float:right; line-height:22px; width:80px; text-align:center; margin-top:10px; list-style-type:none;}

.d ul li a{ font-size:14px;font-weight:bold; color:#890b11;}

.d ul li a:hover{ font-size:16px;color:#000;}

.d ul li ul li{

float:left;

margin:0;

width:155px;}

.d{

height:45px;

width:160px;

background:#0F0;

float:right;

margin-top:-65px;

}


.maii ul li{

display:block;

float:left;

list-style:none;

line-height:40px;

width:400px;

text-align:center;


}

.maii{

width:100%;

height:40px;

background:#999;

top:8px;}


.kf{

width:100%;

height:25px;

background:#999;}

.kf ul li{

float:left;

overflow:hidden;

width:170px;

line-height:25px;

font-size:14px;}

.hj{

width:100%;

height:25px;

}

.hj ul li{

float:left;

overflow:hidden;

width:80px;

margin-top:2px;}

.xz{

text-align:right;}

.sl{

width:154px}

.sous{

margin-top:20px;}

.ux li{

float:none;}


.v{

/*margin-top:120px;*/

background:#06C;

position:relative;}


ul li ul{

display:none;}

鼠标移到生产计划报表时,下面的文字会向右移动?

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

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


正在回答

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

2回答

你好,这里测试是没有这个情况的哦,是否是设置了js事件,你可以查看下js代码哦。

祝学习愉快~

  • I编程 提问者 #1
    // JavaScript Document //封装一个获取id的函数 function byId(id){ return typeof(id)==="string"?document.getElementById(id):id; } //获取id变量 var li=u2, u3=li.getElementsByTagName("ul"), u4=u3.length; //鼠标经过时,下拉菜单显示 function changeImg(){ for(i=0;i<u4;i++){ u3[i].style.display = "block"; } } //鼠标离开时,下拉菜单隐藏 function change(){ for(i=0;i<u4;i++){ u3[i].style.display = "none" } } //调用代码 function slideImg(){ li.onmouseover= changeImg; li.onmouseout=change;} slideImg(); 这是
    2018-04-09 18:21:24
  • I编程 提问者 #2
    这是全部js代码,我这边出现这个情况
    2018-04-09 18:22:22
好帮手慕糖 2018-04-09 18:40:12

你好,如下,鼠标移入的该项的时候,调用了函数,u3显示了,然后把表单的部分给挤走了,建议:可以给u3设置下定位。例:

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

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

祝学习愉快~

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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