Question

当我制作我的下拉框时，一切正常，直到我重新加载网页，除了底部之外的所有下拉菜单都停止了工作。这可能是因为我添加了一些java脚本或另一个下拉列表。这是代码：

<!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 个答案: