请问这个下拉列表提示怎么可以让所有的项都遮住_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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi?
Mar 13, 2024 pm 05:00 PM
Apakah yang perlu saya lakukan jika Google Chrome menggesa bahawa kandungan tab ini dikongsi? Apabila kami menggunakan Google Chrome untuk membuka tab baharu, kadangkala kami menemui gesaan bahawa kandungan tab ini sedang dikongsi. Jadi, apakah yang sedang berlaku? Biarkan tapak ini menyediakan pengguna dengan pengenalan terperinci kepada masalah Google Chrome yang menggesa kandungan tab ini dikongsi. Google Chrome menggesa bahawa kandungan tab ini sedang dikongsi Penyelesaian: 1. Buka Google Chrome Anda boleh melihat tiga titik di sudut kanan atas pelayar "Sesuaikan dan kawal Google Chrome". ikon itu. 2. Selepas mengklik, tetingkap menu Google Chrome akan muncul di bawah, dan tetikus akan beralih ke "Lagi Alat"
Bagaimana untuk mengalih keluar kurungan segi empat sama dari senarai menggunakan Python
Sep 05, 2023 pm 07:05 PM
Python ialah perisian yang sangat berguna yang boleh digunakan untuk pelbagai tujuan bergantung kepada keperluan. Python boleh digunakan dalam pembangunan web, sains data, pembelajaran mesin dan banyak lagi bidang lain yang memerlukan automasi. Ia mempunyai banyak ciri berbeza yang membantu kami melaksanakan tugasan ini. Senarai Python adalah salah satu ciri Python yang sangat berguna. Seperti namanya, senarai mengandungi semua data yang anda ingin simpan. Ia pada asasnya adalah satu set pelbagai jenis maklumat. Cara Berbeza untuk Mengeluarkan Kurungan Segi Empat Banyak kali, pengguna menemui situasi di mana item senarai dipaparkan dalam kurungan segi empat sama. Dalam artikel ini, kami akan memperincikan cara mengalih keluar kurungan ini untuk mendapatkan paparan yang lebih baik tentang penyenaraian anda. Salah satu cara paling mudah untuk mengalih keluar kurungan dalam rentetan dan fungsi penggantian adalah dalam
Cara mengira bilangan elemen dalam senarai menggunakan fungsi count() Python
Nov 18, 2023 pm 02:53 PM
Cara menggunakan fungsi count() Python untuk mengira bilangan elemen dalam senarai memerlukan contoh kod khusus Sebagai bahasa pengaturcaraan yang berkuasa dan mudah dipelajari, Python menyediakan banyak fungsi terbina dalam untuk mengendalikan struktur data yang berbeza. Salah satunya ialah fungsi count(), yang boleh digunakan untuk mengira bilangan elemen dalam senarai. Dalam artikel ini, kami akan menerangkan cara menggunakan fungsi count() secara terperinci dan memberikan contoh kod khusus. Fungsi count() ialah fungsi terbina dalam Python, digunakan untuk mengira sesuatu
Cara Membuat Senarai Beli-belah dalam Apl Peringatan iOS 17 pada iPhone
Sep 21, 2023 pm 06:41 PM
Cara Membuat Senarai Runcit pada iPhone dalam iOS17 Mencipta Senarai Runcit dalam apl Peringatan adalah sangat mudah. Anda hanya menambah senarai dan mengisinya dengan item anda. Apl ini secara automatik mengisih item anda ke dalam kategori, dan anda juga boleh bekerjasama dengan pasangan anda atau rakan kongsi rata untuk membuat senarai barang yang anda perlu beli dari kedai. Berikut ialah langkah penuh untuk melakukan ini: Langkah 1: Hidupkan Peringatan iCloud Walaupun kedengaran pelik, Apple berkata anda perlu mendayakan peringatan daripada iCloud untuk mencipta Senarai Runcit pada iOS17. Berikut ialah langkah untuknya: Pergi ke apl Tetapan pada iPhone anda dan ketik [nama anda]. Seterusnya, pilih i
Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17
Oct 12, 2023 pm 11:41 PM
Dalam iOS 17, Apple telah merombak keseluruhan pilihan nada dering dan nada teksnya, menawarkan lebih daripada 20 bunyi baharu yang boleh digunakan untuk panggilan, mesej teks, penggera dan banyak lagi. Begini cara untuk melihat mereka. Banyak nada dering baharu lebih panjang dan berbunyi lebih moden daripada nada dering lama. Ia termasuk arpeggio, patah, kanopi, kabin, kicauan, subuh, berlepas, dolop, perjalanan, cerek, merkuri, galaksi, quad, jejari, pemulung, anak benih, tempat berteduh, taburan, langkah, masa cerita , goda, senget, terbentang dan lembah. Refleksi kekal sebagai pilihan nada dering lalai. Terdapat juga 10+ nada teks baharu yang tersedia untuk mesej teks masuk, mel suara, makluman mel masuk, makluman peringatan dan banyak lagi. Untuk mengakses nada dering dan nada teks baharu, pertama sekali, pastikan iPhone anda
Cara membuat senarai runcit: Gunakan apl Peringatan untuk iPhone
Dec 01, 2023 pm 03:37 PM
Dalam iOS 17, Apple menambah ciri senarai kecil yang berguna pada apl Peringatan untuk membantu anda apabila anda keluar membeli-belah untuk barangan runcit. Teruskan membaca untuk mengetahui cara menggunakannya dan memendekkan perjalanan anda ke kedai. Apabila anda membuat senarai menggunakan jenis senarai "Grocery" baharu (bernama "Beli-belah" di luar AS), anda boleh memasukkan pelbagai makanan dan barangan runcit dan menyusunnya secara automatik mengikut kategori. Organisasi ini memudahkan anda mencari barang yang anda perlukan di kedai runcit atau semasa keluar membeli-belah. Jenis kategori yang tersedia dalam makluman termasuk Hasil, Roti & Bijirin, Makanan Sejuk Beku, Snek & Gula-gula, Daging, Tenusu, Telur & Keju, Barangan Bakar, Barangan Bakar, Produk Isi Rumah, Penjagaan Diri & Kesejahteraan dan Wain, Bir & Minuman Berasaskan . Yang berikut dibuat dalam iOS17
Bolehkah kita memasukkan nilai nol dalam senarai Java?
Aug 20, 2023 pm 07:01 PM
PenyelesaianYa,Kami boleh memasukkan nilai nol untuk tidak menggunakan kaedah tambah()secara.IncaseofListimplementationtidak menyokongnullthenitwill throwNullPointerException.Syntaxbooleanadd(Ee) Menambahkan elemen yang dinyatakan pada penghujung senarai ini. Jenis parameter E − Jenis masa jalan bagi elemen. Parameter e − elemen untuk dilampirkan pada senarai ini
Apakah perbezaan antara Del dan remove() pada senarai dalam Python?
Sep 12, 2023 pm 04:25 PM
Sebelum membincangkan perbezaan, mari kita fahami dahulu apakah Del dan Remove() dalam senarai Python. Kata Kunci Del dalam Senarai Python Kata kunci del dalam Python digunakan untuk memadam satu atau lebih elemen daripada Senarai. Kami juga boleh memadam semua elemen, iaitu memadam keseluruhan senarai. Contoh penggunaan kata kunci del untuk memadamkan elemen daripada senarai Python #CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="
