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 位于 select 列表顶部 ("drop-down boxes") 阻止点击激活他们并显示列表。

这是因为您在 select 列表上使用 绝对定位，这使它们脱离了正常的文档流，即它们不接受就一些个元素而言，向上 space。

如果您使用 Chrome 右键单击 select 列表之一的顶部（"drop-down boxes"）和 select 检查元素。您会看到 <div class="fadein">...</div> 突出显示，当您将鼠标悬停在 .fadein DIV.[= 上时，select 列表上会出现一个大的蓝色突出显示片刻13=]

我不知道您的最终布局应该是什么样子，但从您开始的布局来看，通常情况下，您不需要为您尝试做的事情使用绝对定位。

修复？通过 CSS.

重新设计在页面上放置元素的方式

Answer 2

.fadein div 与 select 框重叠，因此您无法到达它们。

您可以将负 z-index 参数添加到 .fadein class 样式，以将其放在 select 框后面。

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

HTML 下拉框突然坏了

HTML Drop-down box suddenly broken

javascript

html

css

drop-down-menu

html-select