请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose
<!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
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7491
15
1377
52
77
11
52
19
19
41
Google Chrome에서 이 탭의 콘텐츠가 공유되고 있다는 메시지가 표시되면 어떻게 해야 하나요?
Mar 13, 2024 pm 05:00 PM
Google Chrome에서 이 탭의 콘텐츠가 공유되고 있다는 메시지가 표시되면 어떻게 해야 하나요? Google Chrome을 사용하여 새 탭을 열 때 가끔 이 탭의 콘텐츠가 공유되고 있다는 메시지가 표시됩니다. 무슨 일이 일어나고 있는 걸까요? 이 사이트는 이 탭의 콘텐츠가 공유되고 있다는 메시지를 표시하는 Google Chrome 문제에 대한 자세한 소개를 사용자에게 제공합니다. Google Chrome에서는 이 탭의 콘텐츠가 공유된다는 메시지를 표시합니다. 해결 방법: 1. Google Chrome을 엽니다. "Google Chrome 사용자 정의 및 제어" 아이콘을 클릭하면 변경됩니다. 아이콘. 2. 클릭하면 아래에 구글 크롬 메뉴창이 뜨고, 마우스가 '도구 더보기'로 이동합니다.
Python을 사용하여 목록에서 대괄호를 제거하는 방법
Sep 05, 2023 pm 07:05 PM
Python은 필요에 따라 다양한 목적으로 사용할 수 있는 매우 유용한 소프트웨어입니다. Python은 웹 개발, 데이터 과학, 기계 학습 및 자동화가 필요한 기타 여러 분야에서 사용할 수 있습니다. 여기에는 이러한 작업을 수행하는 데 도움이 되는 다양한 기능이 있습니다. Python 목록은 Python의 매우 유용한 기능 중 하나입니다. 이름에서 알 수 있듯이 목록에는 저장하려는 모든 데이터가 포함됩니다. 기본적으로 다양한 유형의 정보 집합입니다. 대괄호를 제거하는 다양한 방법 사용자는 목록 항목이 대괄호 안에 표시되는 상황을 여러 번 접하게 됩니다. 이 문서에서는 목록을 더 잘 볼 수 있도록 이러한 괄호를 제거하는 방법을 자세히 설명합니다. 문자열 및 대체 함수에서 괄호를 제거하는 가장 쉬운 방법 중 하나는 다음과 같습니다.
Python의 count() 함수를 사용하여 목록의 요소 수를 계산하는 방법
Nov 18, 2023 pm 02:53 PM
Python의 count() 함수를 사용하여 목록의 요소 수를 계산하려면 특정 코드 예제가 필요합니다. 강력하고 배우기 쉬운 프로그래밍 언어인 Python은 다양한 데이터 구조를 처리하기 위한 많은 내장 함수를 제공합니다. 그 중 하나는 목록의 요소 수를 계산하는 데 사용할 수 있는 count() 함수입니다. 이번 글에서는 count() 함수의 사용법을 자세히 설명하고 구체적인 코드 예시를 제공하겠습니다. count() 함수는 Python의 내장 함수로, 특정 값을 계산하는 데 사용됩니다.
iPhone의 iOS 17 미리 알림 앱에서 쇼핑 목록을 만드는 방법
Sep 21, 2023 pm 06:41 PM
iOS17의 iPhone에서 GroceryList를 만드는 방법 미리 알림 앱에서 GroceryList를 만드는 것은 매우 간단합니다. 목록을 추가하고 항목으로 채우면 됩니다. 앱은 자동으로 항목을 카테고리별로 분류하며, 파트너나 플랫 파트너와 협력하여 매장에서 구매해야 할 항목의 목록을 만들 수도 있습니다. 이를 위한 전체 단계는 다음과 같습니다. 1단계: iCloud 미리 알림 켜기 이상하게 들리겠지만 Apple에서는 iOS17에서 GroceryList를 생성하려면 iCloud에서 미리 알림을 활성화해야 한다고 말합니다. 단계는 다음과 같습니다. iPhone의 설정 앱으로 이동하여 [사용자 이름]을 탭하세요. 다음으로 i를 선택하세요.
식료품 목록을 만드는 방법: iPhone용 미리 알림 앱 사용
Dec 01, 2023 pm 03:37 PM
iOS 17에서 Apple은 식료품을 쇼핑할 때 도움이 되도록 미리 알림 앱에 편리한 작은 목록 기능을 추가했습니다. 사용 방법을 알아보고 매장 방문 시간을 단축하려면 계속 읽어보세요. 새로운 '식료품' 목록 유형(미국 외 지역에서는 '쇼핑')을 사용하여 목록을 만들면 다양한 음식과 식료품을 입력하고 카테고리별로 자동으로 정리할 수 있습니다. 이 정리를 통해 식료품점이나 쇼핑 중에 필요한 것을 더 쉽게 찾을 수 있습니다. 알림에서 사용할 수 있는 카테고리 유형에는 농산물, 빵 및 시리얼, 냉동 식품, 스낵 및 사탕, 육류, 유제품, 계란 및 치즈, 구운 식품, 구운 식품, 가정용품, 개인 관리 및 웰빙, 와인, 맥주 및 증류주가 포함됩니다. iOS17에서는 다음이 생성됩니다.
새로운 벨소리 및 문자음 사용해 보기: iOS 17의 iPhone에서 최신 소리 알림을 경험해 보세요
Oct 12, 2023 pm 11:41 PM
iOS 17에서 Apple은 전화, 문자 메시지, 알람 등에 사용할 수 있는 20개 이상의 새로운 사운드를 제공하여 전체 벨소리 및 텍스트 톤 선택을 철저히 조사했습니다. 이를 보는 방법은 다음과 같습니다. 많은 새로운 벨소리는 기존 벨소리보다 더 길고 현대적으로 들립니다. 여기에는 아르페지오, 깨진, 캐노피, 캐빈, 삐걱거리는 소리, 새벽, 출발, 돌롭, 여행, 주전자, 수은, 은하계, 쿼드, 방사형, 청소부, 묘목, 쉼터, 뿌리기, 계단, 이야기 시간, 놀림, 기울이기, 펼치기 및 계곡이 포함됩니다. . 반사는 기본 벨소리 옵션으로 유지됩니다. 수신 문자 메시지, 음성 메일, 수신 메일 알림, 미리 알림 등에 사용할 수 있는 10개 이상의 새로운 문자 신호음도 있습니다. 새로운 벨소리 및 문자 알림음에 액세스하려면 먼저 iPhone이
Java 목록에 null 값을 삽입할 수 있나요?
Aug 20, 2023 pm 07:01 PM
해결 방법예, add() 메서드를 사용하여 쉽게 Null 값을 삽입할 수 있습니다. List 구현이 Null을 지원하지 않는 경우에는NullPointerException이 발생합니다. 구문booleanadd(Ee) 지정된 요소를 이 목록의 끝에 추가합니다. 유형 매개변수 E - 요소의 런타임 유형. 매개변수 e - 이 목록에 추가될 요소
Python의 목록에서 Del과 Remove()의 차이점은 무엇입니까?
Sep 12, 2023 pm 04:25 PM
차이점을 논의하기 전에 먼저 Python 목록에 Del과 Remove()가 무엇인지 이해하겠습니다. Python 목록의 Del 키워드 Python의 del 키워드는 목록에서 하나 이상의 요소를 삭제하는 데 사용됩니다. 모든 요소를 삭제할 수도 있습니다. 즉, 전체 목록을 삭제할 수도 있습니다. del 키워드를 사용하여 Python 목록에서 요소를 삭제하는 예 #CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="
