HTML Drop-down box suddenly broken
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. 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
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; }
2 answers
solution1
0 2015-10-21 14:32:57
Your .fadein DIV is sitting on top of your select lists ( "drop-down boxes" ) preventing a click from activating them and showing the list.
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 . 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.
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.
solution2
0 ACCPTED 2015-10-21 14:33:08
The .fadein div overlaps the select boxes, so you can't reach them.
You could add negative z-index parameter to .fadein class style to place it behind the select boxes.
.fadein {
position:relative;
width:500px;
height:332px;
z-index: -100;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.