Heim >Web-Frontend >HTML-Tutorial >请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose
请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:491082Durchsuche
<!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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：html_html/css_WEB-ITnoseNächster Artikel：Codeforces Round #259 (Div. 2) A B C 三连发_html/css_WEB-ITnose