-1
Когда я делал свои выпадающие окна, все работало правильно, пока я не перезагрузил веб-страницу, и все выпадающие части, кроме нижнего, перестали работать. Возможно, это связано с тем, что я добавил несколько java-скриптов или другой раскрывающийся список. вот код:Выпадающее окно HTML внезапно сломано
<!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; }
YESS, спасибо! У меня было подозрение, что мне нужно было что-то сделать с индексом z, я просто поместил его в неправильное место. – Alex