请问这个下拉列表提示怎么可以让所有的项都遮住_html/css

<!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=GB2312" /><title>输入框提示列表效果</title><style type="text/css"><!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer; change:expression(  this.onmouseover=function(){    this.style.background="#f5f5f5";  },  this.onmouseout=function(){    this.style.background="";  } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}--></style><script type="text/javascript">  function showAndHide(obj,types){    var Layer=window.document.getElementById(obj);    switch(types){  case "show":    Layer.style.display="block";  break;  case "hide":    Layer.style.display="none";  break;}  }  function getValue(obj,str){    var input=window.document.getElementById(obj);input.value=str;  }</script></head><body><div class="form"> <div> 您属于：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>   <!--列表1-->   <div class="Menu" id="List1">  <div class="Menu2">    <ul>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li></ul>  </div>   </div><div>性别：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>    <!--列表2-->   <div class="Menu" id="List2">  <div class="Menu2">    <ul>  <li onmousedown="getValue('txt2','男');showAndHide('List2','hide');">男</li>  <li onmousedown="getValue('txt2','女');showAndHide('List2','hide');">女</li></ul>  </div>   </div><div>学历：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>    <!--列表3-->   <div class="Menu" id="List3">  <div class="Menu2">    <ul>  <li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">专科</li>  <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>  <li onmousedown="getValue('txt3','研究生);showAndHide('List3','hide');">研究生</li></ul>  </div>   </div></div></body></html>

Salin selepas log masuk

第一项的china 和USA 如何使所有的项都有背景，而又部导致后面的性别与学历移位

回复讨论(解决方案)

<!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=GB2312" /><title>输入框提示列表效果</title><style type="text/css"><!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer;z-index: 1000;background-color: #79CDCD;} change:expression(  this.onmouseover=function(){    this.style.background="#f5f5f5";  },  this.onmouseout=function(){    this.style.background="";  } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}--></style><script type="text/javascript">  function showAndHide(obj,types){    var Layer=window.document.getElementById(obj);    switch(types){  case "show":    Layer.style.display="block";  break;  case "hide":    Layer.style.display="none";  break;}  }  function getValue(obj,str){    var input=window.document.getElementById(obj);input.value=str;  }</script></head><body><div class="form"> <div> 您属于：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>   <!--列表1-->   <div class="Menu" id="List1">  <div class="Menu2">    <ul>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','USA');showAndHide('List1','hide');">USA</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt','China');showAndHide('List1','hide');">China</li></ul>  </div>   </div><div>性别：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>    <!--列表2-->   <div class="Menu" id="List2">  <div class="Menu2">    <ul>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt2','男');showAndHide('List2','hide');">男</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt2','女');showAndHide('List2','hide');">女</li></ul>  </div>   </div><div>学历：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>    <!--列表3-->   <div class="Menu" id="List3">  <div class="Menu2">    <ul>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">专科</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>  <li onmouseover="this.style.background='#fbf435';"          onmouseout="this.style.background='#79CDCD';" onmousedown="getValue('txt3','研究生);showAndHide('List3','hide');">研究生</li></ul>  </div>   </div></div></body></html>

Salin selepas log masuk

你试试，记得闭合css,不然会出问题的.另外你可以在输入框设置一个默认值.

<!--body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer;z-index: 1000;background-color: #79CDCD;} change:expression(  this.onmouseover=function(){    this.style.background="#f5f5f5";  },  this.onmouseout=function(){    this.style.background="";  } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}-->

Salin selepas log masuk

上面这样注释CSS是错的。

要像下面这样注释才可以。。。。。。

/*body{background:#fff}.Menu {position:relative;width:120px;height:80px;z-index:1;background: #EEE;border:1px solid #666;margin-top:-100px;display:none;}.Menu2 {position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;}.Menu2 ul{margin:0;padding:0}.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;border-bottom:1px dashed #999;color:#333;cursor:pointer;z-index: 1000;background-color: #79CDCD;} change:expression(  this.onmouseover=function(){    this.style.background="#f5f5f5";  },  this.onmouseout=function(){    this.style.background="";  } )}input{width:120px}.form{width:120px;height:auto;}.form div{position:relative;top:0;left:0;margin-bottom:5px}#List1,#List2,#List3{left:0px;top:93px;}*/

Salin selepas log masuk

你注释掉css好像要出问题，那个li就隐藏不起来了，所以还是保留css，你自己调下

是哦。

现在还有个问题是Menu 的边框没有把Menu2的铺满

你注释掉css好像要出问题，那个li就隐藏不起来了，所以还是保留css，你自己调下

是哦。

现在还有个问题是Menu 的边框没有把Menu2的铺满

.Menu {position:relative;width:120px;height:100px;z-index:1;background: #EEE;margin-top:-100px;display:none;}.Menu2 ul{margin:0;padding:0;border:1px solid #666;}

Salin selepas log masuk

更新这两个css

请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose

回复讨论(解决方案)