请问这个下拉列表提示怎么可以让所有的项都遮住_html/css

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

请问这个下拉列表提示怎么可以让所有的项都遮住_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:00 PM

runterfallen 列表提示

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

Nach dem Login kopieren

第一项的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>

Nach dem Login kopieren

你试试，记得闭合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;}-->

Nach dem Login kopieren

上面这样注释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;}*/

Nach dem Login kopieren

你注释掉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;}

Nach dem Login kopieren

更新这两个css

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7491

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Mar 13, 2024 pm 05:00 PM

Was soll ich tun, wenn Google Chrome meldet, dass der Inhalt dieses Tabs geteilt wird? Wenn wir Google Chrome verwenden, um einen neuen Tab zu öffnen, stoßen wir manchmal auf die Meldung, dass der Inhalt dieses Tabs geteilt wird. Was ist also los? Auf dieser Website erhalten Benutzer eine detaillierte Einführung in das Problem, dass Google Chrome dazu auffordert, den Inhalt dieser Registerkarte zu teilen. Google Chrome weist darauf hin, dass der Inhalt dieser Registerkarte freigegeben wird: 1. Öffnen Sie Google Chrome. In der oberen rechten Ecke des Browsers werden drei Punkte angezeigt. Klicken Sie zum Ändern auf das Symbol das Symbol. 2. Nach dem Klicken wird unten das Menüfenster von Google Chrome angezeigt und die Maus bewegt sich zu „Weitere Tools“.

So entfernen Sie eckige Klammern mit Python aus einer Liste Sep 05, 2023 pm 07:05 PM

Python ist eine sehr nützliche Software, die je nach Bedarf für viele verschiedene Zwecke eingesetzt werden kann. Python kann in der Webentwicklung, Datenwissenschaft, maschinellem Lernen und vielen anderen Bereichen eingesetzt werden, die eine Automatisierung erfordern. Es verfügt über viele verschiedene Funktionen, die uns bei der Ausführung dieser Aufgaben helfen. Python-Listen sind eine der sehr nützlichen Funktionen von Python. Wie der Name schon sagt, enthält eine Liste alle Daten, die Sie speichern möchten. Es handelt sich im Grunde um eine Reihe verschiedener Arten von Informationen. Verschiedene Möglichkeiten, eckige Klammern zu entfernen Häufig stoßen Benutzer auf die Situation, dass Listenelemente in eckigen Klammern angezeigt werden. In diesem Artikel erfahren Sie, wie Sie diese Klammern entfernen, um Ihren Eintrag besser sehen zu können. Eine der einfachsten Möglichkeiten, Klammern in Zeichenfolgen und Ersetzungsfunktionen zu entfernen, finden Sie in

So zählen Sie die Anzahl der Elemente in einer Liste mit der Funktion count() von Python Nov 18, 2023 pm 02:53 PM

Um die Anzahl der Elemente in einer Liste mit der Funktion count() von Python zu zählen, sind bestimmte Codebeispiele erforderlich. Als leistungsstarke und leicht zu erlernende Programmiersprache bietet Python viele integrierte Funktionen zur Verarbeitung unterschiedlicher Datenstrukturen. Eine davon ist die Funktion count(), mit der sich die Anzahl der Elemente in einer Liste zählen lässt. In diesem Artikel erklären wir die Verwendung der count()-Funktion im Detail und stellen spezifische Codebeispiele bereit. Die Funktion count() ist eine in Python integrierte Funktion, mit der ein bestimmter Wert berechnet wird

So erstellen Sie eine Einkaufsliste in der iOS 17-Erinnerungs-App auf dem iPhone Sep 21, 2023 pm 06:41 PM

So erstellen Sie eine Einkaufsliste auf dem iPhone in iOS17. Das Erstellen einer Einkaufsliste in der Erinnerungen-App ist sehr einfach. Sie fügen einfach eine Liste hinzu und füllen sie mit Ihren Artikeln. Die App sortiert Ihre Artikel automatisch in Kategorien und Sie können sogar mit Ihrem Partner oder Ihrer Wohnungspartnerin zusammenarbeiten, um eine Liste der Dinge zu erstellen, die Sie im Geschäft kaufen müssen. Hier sind die vollständigen Schritte dazu: Schritt 1: iCloud-Erinnerungen aktivieren So seltsam es auch klingen mag, Apple sagt, dass Sie Erinnerungen von iCloud aktivieren müssen, um eine Einkaufsliste unter iOS17 zu erstellen. Hier sind die Schritte dafür: Gehen Sie zur App „Einstellungen“ auf Ihrem iPhone und tippen Sie auf [Ihr Name]. Wählen Sie als Nächstes i aus

So erstellen Sie eine Einkaufsliste: Verwenden Sie die Erinnerungen-App für das iPhone Dec 01, 2023 pm 03:37 PM

In iOS 17 hat Apple der Erinnerungs-App eine praktische kleine Listenfunktion hinzugefügt, die Ihnen beim Lebensmitteleinkauf hilft. Lesen Sie weiter, um zu erfahren, wie Sie es verwenden und Ihren Weg zum Geschäft verkürzen. Wenn Sie eine Liste mit dem neuen Listentyp „Lebensmittel“ (außerhalb der USA „Shopping“ genannt) erstellen, können Sie eine Vielzahl von Lebensmitteln und Lebensmitteln eingeben und diese automatisch nach Kategorien organisieren lassen. Diese Organisation macht es einfacher, im Supermarkt oder beim Einkaufen zu finden, was Sie brauchen. Zu den in Warnungen verfügbaren Kategorietypen gehören Obst und Gemüse, Brot und Getreide, Tiefkühlkost, Snacks und Süßigkeiten, Fleisch, Milchprodukte, Eier und Käse, Backwaren, Backwaren, Haushaltsprodukte, Körperpflege und Wellness sowie Wein, Bier und Spirituosen. Folgendes wird in iOS17 erstellt

Probieren Sie neue Klingeltöne und Texttöne aus: Erleben Sie die neuesten akustischen Warnungen auf dem iPhone in iOS 17 Oct 12, 2023 pm 11:41 PM

In iOS 17 hat Apple seine gesamte Auswahl an Klingeltönen und Texttönen überarbeitet und bietet mehr als 20 neue Sounds, die für Anrufe, Textnachrichten, Alarme und mehr verwendet werden können. Hier erfahren Sie, wie Sie sie sehen können. Viele neue Klingeltöne sind länger und klingen moderner als ältere Klingeltöne. Dazu gehören Arpeggio, Broken, Canopy, Cabin, Chirp, Dawn, Departure, Dolop, Journey, Kettle, Mercury, Galaxy, Quad, Radial, Scavenger, Seedling, Shelter, Sprinkle, Steps, Story Time, Tease, Tilt, Unfold und Valley . Reflection bleibt die Standardklingeltonoption. Außerdem stehen über 10 neue Texttöne für eingehende Textnachrichten, Voicemails, Benachrichtigungen über eingehende E-Mails, Erinnerungsbenachrichtigungen und mehr zur Verfügung. Um auf neue Klingeltöne und Texttöne zuzugreifen, stellen Sie zunächst sicher, dass Ihr iPhone

Können wir einen Nullwert in die Java-Liste einfügen? Aug 20, 2023 pm 07:01 PM

LösungJa, wir können den Nullwert ganz einfach mit der Methode add() einfügen. Wenn die Listenimplementierung Null nicht unterstützt, löst sie eine NullPointerException aus. Syntaxbooleanadd(Ee) Hängt das angegebene Element an das Ende dieser Liste an. Typparameter E – Der Laufzeittyp des Elements. Parameter e – Element, das an diese Liste angehängt werden soll

Was ist der Unterschied zwischen Del und remove() für Listen in Python? Sep 12, 2023 pm 04:25 PM

Bevor wir die Unterschiede besprechen, wollen wir zunächst verstehen, was Del und Remove() in Python-Listen sind. Schlüsselwort „del“ in der Python-Liste Das Schlüsselwort „del“ in Python wird verwendet, um ein oder mehrere Elemente aus einer Liste zu löschen. Wir können auch alle Elemente löschen, also die gesamte Liste löschen. Beispiel für die Verwendung des Schlüsselworts del zum Löschen von Elementen aus einer Python-Liste #CreateaListmyList=["Toyota", "Benz", "Audi", "Bentley"]print("List="

See all articles