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