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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:00 PM

下拉列表提示

<!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，你自己调下

是哦。

现在还有个问题是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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7456

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

谷歌浏览器提示此标签页的内容正在被共享怎么办？ Mar 13, 2024 pm 05:00 PM

　　谷歌浏览器提示此标签页的内容正在被共享怎么办？我们在使用谷歌浏览器打开新标签的时候有时候会遇到提示此标签页的内容正在被共享，那么这是怎么回事？下面就让本站来为用户们来仔细的介绍一下谷歌浏览器提示此标签页的内容正在被共享的问题解析吧。　　谷歌浏览器提示此标签页的内容正在被共享解决方法　　1、打开谷歌浏览器，在浏览器右上角可以看到三个点“自定义和控制Googlechrome”用鼠标点击图标进行图标。　　2、点击后，谷歌浏览器的菜单窗口将弹出到下面，鼠标将移动到“更多工具

如何使用Python从列表中删除方括号 Sep 05, 2023 pm 07:05 PM

Python是一款非常有用的软件，可以根据需要用于许多不同的目的。Python可以用于Web开发、数据科学、机器学习等许多其他需要自动化处理的领域。它具有许多不同的功能，可以帮助我们执行这些任务。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提醒事项听起来很奇怪，苹果表示您需要启用来自iCloud的提醒才能在iOS17上创建GroceryList。以下是它的步骤：前往iPhone上的“设置”应用，然后点击[您的姓名]。接下来，选择i

试用新的铃声和文本提示音：在 iOS 17 的 iPhone 上体验最新的声音提醒功能 Oct 12, 2023 pm 11:41 PM

在iOS17中，Apple彻底改变了其全部铃声和文本音调选择，提供了20多种可用于电话、短信、闹钟等的新声音。以下是查看它们的方法。与旧铃声相比，许多新铃声的长度更长，听起来更现代。它们包括琶音、破碎、树冠、小木屋、啁啾、黎明、出发、多洛普、旅程、水壶、水星、银河系、四边形、径向、清道夫、幼苗、庇护所、洒水、台阶、故事时间、戏弄、倾斜、展开和山谷。反射仍然是默认铃声选项。还有10多种新的文本提示音可用于传入短信、语音邮件、传入邮件警报、提醒警报等。要访问新的铃声和文本铃声，首先，请确保您的iPh

创建杂货清单的方法：使用 iPhone 的'提醒事项”App Dec 01, 2023 pm 03:37 PM

在iOS17中，Apple在提醒应用程序中添加了一个方便的小列表功能，以便在您外出购买杂货时为您提供帮助。继续阅读以了解如何使用它并缩短您的商店之旅。当您使用新的“杂货”列表类型（在美国以外名为“购物”）创建列表时，您可以输入各种食品和杂物，并按类别自动组织它们。该组织使您在杂货店或外出购物时更容易找到您需要的东西。提醒中可用的类别类型包括农产品、面包和谷物、冷冻食品、零食和糖果、肉类、乳制品、鸡蛋和奶酪、烘焙食品、烘焙食品、家居用品、个人护理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17中创

我们可以在Java列表中插入空值吗？ Aug 20, 2023 pm 07:01 PM

SolutionYes,Wecaninsertnullvaluestoalisteasilyusingitsadd()method.IncaseofListimplementationdoesnotsupportnullthenitwillthrowNullPointerException.Syntaxbooleanadd(Ee)将指定的元素追加到此列表的末尾。类型参数E −元素的运行时类型。参数e −要追加到此列表的元

Del和remove()在Python中的列表上有什么区别？ Sep 12, 2023 pm 04:25 PM

在讨论差异之前，让我们先了解一下Python列表中的Del和Remove()是什么。Python列表中的Del关键字Python中的del关键字用于从List中删除一个或多个元素。我们还可以删除所有元素，即删除整个列表。示例使用del关键字从Python列表中删除元素#CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="

See all articles

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

回复讨论(解决方案)

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题