HTML下拉框突然壞了

Question

當我制作下拉框時，一切正常，直到我重新加載網頁，並且除底部之外的所有下拉框都停止工作。 可能是因為我添加了一些 java-script 或其他下拉列表。 這是代碼：

<!DOCTYPE html>
<html>

<head>

<title>MDC Vacuum | Vacuum components</title>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="jquery-1.11.3.min.js"></script>


<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  7000);
 });

</script>
</head>


<body>


<ul>
<li id = "home">
    HOME
</li>
</ul>



<select id="one">

 <option>
    PRODUCT CATALOUGE
 </option>

 <option>
    Vacuum Components
 </option>

 <option>
    Valve Components
 </option>

 <option>
    Roughing Components
 </option>

 <option>
    Vacuum Measurement
 </option>

 <option>
    Glass Components
 </option>

 <option>
    Electrical Feedthroughs
 </option>

 <option>
    Motion and manipulation
 </option>

 <option>
    THIN FILM PRODUCTS
 </option>
 </select>


 <select id ="two">
 <option>
    REQUEST A QUOTE
 </option>

 <option>
    Request Print Catalouge
 </option>

 <option>
    Terms & Conditions
 </option>

 <option>
    Employment
 </option>

 </select>


 <select id ="three">
 <option>
    ABOUT MDC
 </option>

 <option>
    Quality Assurance
 </option>

 <option>
    Returns Policy
 </option>

 </select>


 <ul>
 <li id = "custom">
    CUSTOM ENGINEERING
 </li>
 </ul>

 <select id ="news">
 <option>
    NEWS & EVENTS
 </option>

 <option>
    Newsletter Subscription
 </option>


 </select>



 <ul>
 <li id = "search">
    Search
 </li>
 </ul>

 <ul>
 <li id = "contact">
    CONTACT
 </li>
 </ul>

 <div id = "logo">
 <img src = "mdc.png">
 </div>

 <div class="fadein">
 <img src="slide1.jpg">
 <img src="slide2.jpg">
 <img src="slide3.jpg">
 <img src="slide4.jpg">
 <img src="slide5.jpg">
 </div>







</body>

</html>

繼承人的CSS

body {font-family: Palatino Linotype;}


#home{
list-style-type: none;
margin: 10px;
padding: 10px; 
border:1px solid grey;
width: 18.7%;
text-align:center;
font-family: Palatino Linotype;
font-size: 15px;
-moz-appearance: none;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
text-transform:uppercase;


position:absolute; top: 2%; left: 2%;

}

#one { 
  margin: 10px;
  padding: 10px; 
  width: 20%;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px purple inset;

  position:absolute;top:10%;left:2%;
 }


 #two { 
  margin: 10px;
  padding: 10px; 
  width: 20%;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px red inset;

  position:absolute;top:18%;left:2%;
}

 #three { 
  margin: 10px;
  padding: 10px; 
  width: 20%;

  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px orange inset;

  position:absolute;top:26%;left:2%;
 }

 #search{
list-style-type: none;
margin: 10px;
padding: 10px; 
border:1px solid grey;
width: 18.7%;
text-align:center;
font-family: Palatino Linotype;
font-size: 15px;
-moz-appearance: none;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
box-shadow: 0 3px 0 #ccc, 0 -1px pink inset;
text-transform:uppercase;


position:absolute; top: 2%; left: 29%;
}




#news{
list-style-type: none;
margin: 10px;
padding: 10px; 
border:1px solid grey;
width: 20%;
text-align:center;
font-family: Palatino Linotype;
font-size: 15px;
-moz-appearance: none;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
box-shadow: 0 3px 0 #ccc, 0 -1px silver inset;



position:absolute; top: 34%; left: 2%;

}

#custom{
list-style-type: none;
margin: 10px;
padding: 10px; 
border:1px solid grey;
width: 18.7%;

font-family: Palatino Linotype;
font-size: 15px;
-moz-appearance: none;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
box-shadow: 0 3px 0 #ccc, 0 -1px black inset;



position:absolute; top: 42%; left: 2%;

}
#contact{
list-style-type: none;
margin: 10px;
padding: 10px; 
border:1px solid grey;
width: 18.7%;
text-align:center;
font-family: Palatino Linotype;
font-size: 15px;
-moz-appearance: none;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
box-shadow: 0 3px 0 #ccc, 0 -1px brown inset;



position:absolute; top: 2%; left: 53%;
}

#logo{
position:absolute;
top:6%;left:83%;
}

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:110%; top:50%;
border:1px solid blue;
z-index:-1; }

Answer 1

您的.fadein DIV 位於選擇列表（ “下拉框” ）的頂部，防止單擊激活它們並顯示列表。

這樣做的原因是因為您在選擇列表上使用了絕對定位，這使它們脫離了正常的文檔流，即就某些元素而言，它們不占用空間。

如果您使用 Chrome 右鍵單擊選擇列表之一（ “下拉框” ）的頂部，然后選擇Inspect Element 。 您會看到<div class="fadein">...</div>突出顯示，並且當您將鼠標懸停在.fadein DIV 上時，您的選擇列表上會出現一個大的藍色突出顯示片刻。

我不知道你的最終布局應該是什么樣子，但從你開始的情況來看，而且很多時候，你不需要對你想要做的事情使用絕對定位。

修理？ 重新設計如何通過 CSS 在頁面上放置元素。

Answer 2

.fadein div 與選擇框重疊，因此您無法觸及它們。

您可以將負 z-index 參數添加到 .fadein 類樣式以將其放置在選擇框后面。

.fadein {
    position:relative; 
    width:500px; 
    height:332px;
    z-index: -100;
}

HTML下拉框突然壞了

問題描述

2 個解決方案

解決方案1
0 2015-10-21 14:32:57

解決方案2
0 已采納 2015-10-21 14:33:08

HTML下拉框突然壞了

問題描述

2 個解決方案

解決方案1 0 2015-10-21 14:32:57

解決方案2 0 已采納 2015-10-21 14:33:08

解決方案1
0 2015-10-21 14:32:57

解決方案2
0 已采納 2015-10-21 14:33:08