HTML下拉框突然坏了

Question

As I made my drop-down boxes everything was working correctly until i reloaded the web page and all of the drop-downs apart from the bottom one had stopped working.当我制作下拉框时，一切正常，直到我重新加载网页，并且除底部之外的所有下拉框都停止工作。 It may be because I added some java-script or another drop-down list.可能是因为我添加了一些 java-script 或其他下拉列表。 here's the code:这是代码：

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

heres the css继承人的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

Your .fadein DIV is sitting on top of your select lists ( "drop-down boxes" ) preventing a click from activating them and showing the list.您的.fadein DIV 位于选择列表（ “下拉框” ）的顶部，防止单击激活它们并显示列表。

The reason for this is because you are using absolute positioning on the select lists which take them out of the normal document flow, ie they don't take up space as far as some elements are concerned.这样做的原因是因为您在选择列表上使用了绝对定位，这使它们脱离了正常的文档流，即就某些元素而言，它们不占用空间。

If you use Chrome right click on top of one of the select lists ( "drop-down boxes" ) and select Inspect Element .如果您使用 Chrome 右键单击选择列表之一（ “下拉框” ）的顶部，然后选择Inspect Element 。 You'll see that <div class="fadein">...</div> is highlighted and a large blue highlight will appear over your select lists for a moment and again when you hover over the .fadein DIV.您会看到<div class="fadein">...</div>突出显示，并且当您将鼠标悬停在.fadein DIV 上时，您的选择列表上会出现一个大的蓝色突出显示片刻。

I don't know what your final layout is supposed to look like but from what you have started with, and quite often, you don't need to use absolute positioning for what you are attempting to do.我不知道你的最终布局应该是什么样子，但从你开始的情况来看，而且很多时候，你不需要对你想要做的事情使用绝对定位。

To fix?修理？ Re-work how you placing elements on the page via CSS.重新设计如何通过 CSS 在页面上放置元素。

Answer 2

The .fadein div overlaps the select boxes, so you can't reach them. .fadein div 与选择框重叠，因此您无法触及它们。

You could add negative z-index parameter to .fadein class style to place it behind the select boxes.您可以将负 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