1
Safari, Chrome, Firefox에서 내 중심 수평 드롭 다운 탐색 바가 작동하지만 Internet Explorer에서 드롭 다운 메뉴가 작동하지 않습니다. 나는 IE8, IE9 및 IE10에서만 테스트 할 수 있었으며 그 중 어떤 메뉴에서도 메뉴가 드롭 다운되지 않습니다. 메뉴가 제대로 배치되었지만 드롭 다운되지 않습니다. 나는 해결책을 찾기 위해 오랜 시간 동안 수색을 해왔지만, 나는 나를 위해 일하는 것을 찾을 수 없었다. 여기 IE에서 CSS 드롭 다운 탐색 바가 작동하지 않습니다.
<!doctype html>
<html>
<head>
<title>RIP | Reduce Irresponsible Plastic</title>
<link href="apes.css" rel="stylesheet" type="text/css">
<meta name="keywords" content="gilroy, ca, christopher, high, school, apes, environmental, science, environment, plastic"/>
<meta name="description" content="Reduce Irresponsible Plastic and the use of disposable plastic items in lunches."/>
<meta name="geo.region" content="US-CA" />
<meta name="geo.placename" content="Gilroy,CA" />
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="bag1.jpg"
var image2=new Image()
image2.src="bottle1.jpg"
//-->
</script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.addEventListener) {
window.addEventListener('load', sfHover, false);
} else if (window.attachEvent) {
window.attachEvent('onload', sfHover);
}
//--><!]]>
</script>
</head>
<body background="webtreats_deep_water_blues_4 copy.jpg">
<div id="wrap">
<div id="header">
<div id="head">
<table border="1" width=1000px height=50px>
<td>
<img src="logp.png">
<p id="smaller"><font id="big">R</font><font id="text">educe </font><font id="big">I</font><font id="text">rresponsible </font><font id="big">P</font><font id="text1">lastic</font>
<p id="smaller2"><font id="top3"><i>Don't be a fool, reduce plastic at school</i></font>
</td>
</table>
</div>
</div>
<div style="width: 1000px;" onmouseover="document.getElementById('nav');">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="#">History ▾</a>
<ul>
<li><a href="develop.html">How did it develop?</a></li>
<li><a href="firstid.html">First Identification</a></li>
<li><a href="facts.html">Facts</a></li>
</ul>
</li>
<li><a href="#">The Problem ▾</a>
<ul>
<li><a href="causes.html">Causes</a></li>
<li><a href="consequences.html">Consequences</a></li>
</ul>
</li>
<li><a href="#">Images ▾</a>
<ul>
<li><a href="graphs.html">Graphs</a></li>
<li><a href="maps.html">Maps</a></li>
<li><a href="pictures.html">Pictures</a></li>
</ul>
</li>
<li><a href="learn.html">Learn More</a></li>
</ul>
</div>
</div>
#nav {
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
position:relative;
z-index:1000000;
border-radius:10px;
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF');
}
#nav ul {
float:right;
list-style:none;
margin:0;
padding: 0;
position:relative;
z-index:9999;
right:50%;
text-align:center;
}
#nav ul li {
float:left;
margin:0 0 0 0px;
padding:0;
position:relative;
z-index:9999;
list-style:none;
left:50%;
top:1px;
width:160px;
}
#nav li ul {
position: absolute;
display: none;
}
#nav li:hover ul,
#nav li.sfhover ul,
a:hover#nav li ul {
display: block;
}
#nav ul li a {
display:block;
margin:0;
padding:.75em 0em .5em 0em;
color:#000;
text-decoration:none;
line-height:1em;
}
#nav ul li.active a {
color:#fff;
}
#nav ul li a:hover,
#nav ul li a.sfhover
{
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5deea', endColorstr='#066dab',GradientType=0); /* IE6-9 */
}
#nav ul li:hover a,
#nav ul li.hover a,
#nav ul li.sfhover a
{
color:#000;
font-weight:bold;
}
#nav ul ul {
display: none;
width:160px;
position:absolute;
top:auto;
left:0;
float:left;
right:auto;
}
#nav ul ul li {
left:auto;
margin:0;
clear:left;
float:left;
width:100%;
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #87CEFF 50%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#87CEFF 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#87CEFF');
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a,
#nav ul li.sfhover ul li a,
a:hover#nav ul li ul li
{
font-weight:normal;
line-height:2em;
float:left;
width:100%;
position:relative;
z-index:9999;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover,
#nav ul li.sfhover ul li a.sfhover,
#nav ul ul li a.sfhover
{
color:#fff;
float:left;
background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5deea', endColorstr='#066dab',GradientType=0); /* IE6-9 */
position:relative;
z-index:9999;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul ul.last li {
float:right;
position:relative;
z-index:9999;
right:.8em;
}
#nav ul li:hover ul,
#nav ul li.hover ul,
li:hover#nav ul ul,
#nav ul li.sfhover ul
{
display:block;
}
#nav > li { /* used the child selector here to properly target your first level menu items */
position: relative;
z-index:9999;
float: left;
}
#nav li { /* used the child selector here to properly target your first level menu items */
position: relative;
z-index:9999;
float: left;
}
#nav li a {
display: block;
}
하지만 여전히 지속되고 IE를 제외한 모든 브라우저에서 작동합니다. IE 10
'window.attachEvent' 모든 브라우저에는 적용되지 않습니다 -이 [이 질문에] 봐 (http://stackoverflow.com/questions/2657182/correct-usage-of-addeventlistener-attachevent) – Owlvark
감사합니다. 나는 그 질문을 보았고 몇 가지 변화를 만들었지 만 여전히 IE에서는 작동하지 않습니다. 아마 당신이 정교하고 실제 코드를 수정하도록 도와 주시겠습니까? – justinlav
어딘가에 문제는 스타일링에 있다고 생각합니다. – Owlvark