请问这个下拉列表提示怎么可以让所有的项都遮住_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信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦？ Mar 13, 2024 pm 05:00 PM

　　Google瀏覽器提示此標籤頁的內容正在被分享怎麼辦？我們在使用Google瀏覽器開啟新標籤的時候有時會遇到提示此標籤頁的內容正在被分享，那麼這是怎麼回事？以下就讓本站來為使用者來仔細的介紹一下谷歌瀏覽器提示此標籤頁的內容正在被共享的問題解析吧。　　Google瀏覽器提示此標籤頁的內容正在被共享解決方法　　1、打開谷歌瀏覽器，在瀏覽器右上角可以看到三個點「自訂和控制Googlechrome」用滑鼠點擊圖示進行圖示。　　2、點擊後，Google瀏覽器的選單視窗將彈出到下面，滑鼠將移動到「更多工具

如何使用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

建立雜貨清單的方法：使用 iPhone 的「提醒事項」App Dec 01, 2023 pm 03:37 PM

在iOS17中，Apple在提醒應用程式中添加了一個方便的小清單功能，以便在您外出購買雜貨時為您提供幫助。繼續閱讀以了解如何使用它並縮短您的商店之旅。當您使用新的「雜貨」清單類型（在美國以外名為「購物」）建立清單時，您可以輸入各種食品和雜物，並按類別自動組織它們。該組織使您在雜貨店或外出購物時更容易找到您需要的東西。提醒中可用的類別類型包括農產品、麵包和穀物、冷凍食品、零食和糖果、肉類、乳製品、雞蛋和奶酪、烘焙食品、烘焙食品、家居用品、個人護理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17創

試試新的鈴聲和文字提示音：在 iOS 17 的 iPhone 上體驗最新的聲音提醒功能 Oct 12, 2023 pm 11:41 PM

在iOS17中，Apple徹底改變了其全部鈴聲和文字音調選擇，提供了20多種可用於電話、簡訊、鬧鐘等的新聲音。以下是查看它們的方法。與舊鈴聲相比，許多新鈴聲的長度更長，聽起來更現代。它們包括琶音、破碎、樹冠、小木屋、啁啾、黎明、出發、多洛普、旅程、水壺、水星、銀河系、四邊形、徑向、清道夫、幼苗、庇護所、灑水、台階、故事時間、戲弄、傾斜、展開和山谷。反射仍然是預設鈴聲選項。還有10多種新的文字提示音可用於傳入簡訊、語音郵件、傳入郵件警報、提醒警報等。要存取新的鈴聲和文字鈴聲，首先，請確保您的iPh

我們可以在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版

熱門話題