search

Home >Web Front-end >HTML Tutorial >Please tell me how to hide all items in this drop-down list_html/css_WEB-ITnose

Please tell me how to hide all items in this drop-down list_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:00:491084browse

<!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>


How to make all the items have backgrounds for china and USA in the first item without causing any shift in gender and academic level in the following items


Reply to the discussion (solution)

<!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>


Try it, remember to close css, otherwise there will be problems. In addition, you can set a default value in the input box. 

<!--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;}-->


It is wrong to annotate CSS like this.

Just comment like below. . . . . . 

/*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;}*/

There seems to be a problem if you comment out the css, and the li cannot be hidden, so it is better to keep the css and adjust it yourself

There seems to be a problem if you comment out the css. The li cannot be hidden, so it is better to keep the css and adjust it yourself



Yes.

Another problem now is that the border of Menu does not cover Menu2


There seems to be a problem if you comment out the css, the li cannot be hidden. It's up, so I'd better keep the css and adjust it yourself



Yes.

There is another problem now that the border of Menu does not cover 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;}


Update these two css
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html_html/css_WEB-ITnoseNext article：html_html/css_WEB-ITnose

Related articles

See more