请问这个下拉列表提示怎么可以让所有的项都遮住_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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que dois-je faire si Google Chrome indique que le contenu de cet onglet est partagé ?
Mar 13, 2024 pm 05:00 PM
Que dois-je faire si Google Chrome indique que le contenu de cet onglet est partagé ? Lorsque nous utilisons Google Chrome pour ouvrir un nouvel onglet, nous rencontrons parfois une invite indiquant que le contenu de cet onglet est partagé. Alors, que se passe-t-il ? Laissez ce site fournir aux utilisateurs une introduction détaillée au problème de Google Chrome, invitant à partager le contenu de cet onglet. Google Chrome indique que le contenu de cet onglet est en cours de partage. Solution : 1. Ouvrez Google Chrome. Vous pouvez voir trois points dans le coin supérieur droit du navigateur « Personnaliser et contrôler Google Chrome ». l'icône. 2. Après avoir cliqué, la fenêtre de menu de Google Chrome apparaîtra ci-dessous et la souris se déplacera vers « Plus d'outils ».
Comment supprimer les crochets d'une liste en utilisant Python
Sep 05, 2023 pm 07:05 PM
Python est un logiciel très utile qui peut être utilisé à de nombreuses fins différentes selon les besoins. Python peut être utilisé dans le développement Web, la science des données, l'apprentissage automatique et de nombreux autres domaines nécessitant une automatisation. Il possède de nombreuses fonctionnalités différentes qui nous aident à effectuer ces tâches. Les listes Python sont l'une des fonctionnalités très utiles de Python. Comme son nom l'indique, une liste contient toutes les données que vous souhaitez stocker. Il s’agit essentiellement d’un ensemble de différents types d’informations. Différentes façons de supprimer les crochets Souvent, les utilisateurs se retrouvent dans une situation où les éléments de la liste sont affichés entre crochets. Dans cet article, nous détaillerons comment supprimer ces crochets pour avoir une meilleure vue de votre annonce. L'un des moyens les plus simples de supprimer les parenthèses dans les chaînes et les fonctions de remplacement consiste à
Comment compter le nombre d'éléments dans une liste à l'aide de la fonction count() de Python
Nov 18, 2023 pm 02:53 PM
Comment utiliser la fonction count() de Python pour compter le nombre d'éléments dans une liste nécessite des exemples de code spécifiques. En tant que langage de programmation puissant et facile à apprendre, Python fournit de nombreuses fonctions intégrées pour gérer différentes structures de données. L'une d'elles est la fonction count(), qui peut être utilisée pour compter le nombre d'éléments dans une liste. Dans cet article, nous expliquerons en détail comment utiliser la fonction count() et fournirons des exemples de code spécifiques. La fonction count() est une fonction intégrée de Python, utilisée pour calculer un certain
Comment créer une liste de courses dans l'application de rappels iOS 17 sur iPhone
Sep 21, 2023 pm 06:41 PM
Comment créer une liste d'épicerie sur iPhone sous iOS17 Créer une liste d'épicerie dans l'application Rappels est très simple. Il vous suffit d'ajouter une liste et de la remplir avec vos éléments. L'application trie automatiquement vos articles en catégories et vous pouvez même travailler avec votre partenaire ou partenaire d'appartement pour dresser une liste de ce que vous devez acheter dans le magasin. Voici les étapes complètes pour ce faire : Étape 1 : activer les rappels iCloud Aussi étrange que cela puisse paraître, Apple dit que vous devez activer les rappels d'iCloud pour créer une liste d'épicerie sur iOS17. Voici les étapes à suivre : Accédez à l'application Paramètres sur votre iPhone et appuyez sur [votre nom]. Ensuite, sélectionnez je
Comment créer une liste de courses : utilisez l'application Rappels pour iPhone
Dec 01, 2023 pm 03:37 PM
Dans iOS 17, Apple a ajouté une petite fonctionnalité de liste pratique à l'application Rappels pour vous aider lorsque vous faites vos courses. Lisez la suite pour savoir comment l'utiliser et raccourcir votre déplacement au magasin. Lorsque vous créez une liste à l'aide du nouveau type de liste « Épicerie » (appelé « Shopping » en dehors des États-Unis), vous pouvez saisir une variété d'aliments et de produits d'épicerie et les organiser automatiquement par catégorie. Cette organisation facilite la recherche de ce dont vous avez besoin à l'épicerie ou lors de vos courses. Les types de catégories disponibles dans les alertes incluent les produits, le pain et les céréales, les aliments surgelés, les collations et les bonbons, la viande, les produits laitiers, les œufs et le fromage, les produits de boulangerie, les produits de boulangerie, les produits ménagers, les soins personnels et le bien-être, ainsi que le vin, la bière et les spiritueux. Ce qui suit est créé dans iOS17
Essayez de nouvelles sonneries et tonalités de texte : découvrez les dernières alertes sonores sur iPhone sous iOS 17
Oct 12, 2023 pm 11:41 PM
Dans iOS 17, Apple a remanié toute sa sélection de sonneries et de tonalités de texte, offrant plus de 20 nouveaux sons pouvant être utilisés pour les appels, les messages texte, les alarmes et bien plus encore. Voici comment les voir. De nombreuses nouvelles sonneries sont plus longues et semblent plus modernes que les anciennes sonneries. Ils incluent arpège, brisé, canopée, cabine, gazouillis, aube, départ, dolop, voyage, bouilloire, mercure, galaxie, quad, radial, charognard, semis, abri, saupoudrage, marches, heure du conte, taquiner, inclinaison, déplier et vallée. La réflexion reste l'option de sonnerie par défaut. Plus de 10 nouvelles tonalités de texte sont également disponibles pour les messages texte entrants, les messages vocaux, les alertes de courrier entrant, les alertes de rappel, etc. Pour accéder à de nouvelles sonneries et tonalités de texte, assurez-vous d'abord que votre iPhone
Pouvons-nous insérer une valeur nulle dans la liste Java ?
Aug 20, 2023 pm 07:01 PM
SolutionOui, nous pouvons insérer des valeurs nulles pour les lister facilement à l'aide de sa méthode add(). Si l'implémentation de liste ne prend pas en charge null, elle lancera une exception NullPointerException. Syntaxe booleanadd(Ee) Ajoute l'élément spécifié à la fin de cette liste. Paramètre de type E - Le type d'exécution de l'élément. Paramètre e - élément à ajouter à cette liste
Quelle est la différence entre Del et Remove() sur les listes en Python ?
Sep 12, 2023 pm 04:25 PM
Avant de discuter des différences, comprenons d'abord ce que sont Del et Remove() dans les listes Python. Mot-clé Del dans une liste Python Le mot-clé del en Python est utilisé pour supprimer un ou plusieurs éléments d'une liste. Nous pouvons également supprimer tous les éléments, c'est-à-dire supprimer la liste entière. Exemple d'utilisation du mot-clé del pour supprimer des éléments d'une liste Python #CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="
