请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:00:491084浏览
<!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> 第一项的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> 你试试，记得闭合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;}--> 上面这样注释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;}*/ 你注释掉css好像要出问题，那个li就隐藏不起来了，所以还是保留css，你自己调下
你注释掉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;} 更新这两个css
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn