Html 下拉列表在IE10中不起作用
我已经尝试了一段时间,以获得一套下拉菜单,我创造了工作。从我读到的一些内容来看,似乎是IE不受支持的问题:将鼠标悬停在li元素上。我尝试了包括jQuery在内的几种方法来解决这个问题,但都没有效果。对我来说最奇怪的一件事是,如果我把我正在使用的完全相同的CSS/HTML放进JSFIDLE,它在所有浏览器中都可以正常工作,但是如果我把它放进一个页面并测试它,IE什么也不做 这似乎是一个很容易解决的问题,但不知何故,我一直未能找到解决方案Html 下拉列表在IE10中不起作用,html,css,internet-explorer,Html,Css,Internet Explorer,我已经尝试了一段时间,以获得一套下拉菜单,我创造了工作。从我读到的一些内容来看,似乎是IE不受支持的问题:将鼠标悬停在li元素上。我尝试了包括jQuery在内的几种方法来解决这个问题,但都没有效果。对我来说最奇怪的一件事是,如果我把我正在使用的完全相同的CSS/HTML放进JSFIDLE,它在所有浏览器中都可以正常工作,但是如果我把它放进一个页面并测试它,IE什么也不做 这似乎是一个很容易解决的问题,但不知何故,我一直未能找到解决方案 @import url(http://fonts.googl
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
#main_nav{
/*background: #4cb6ea;*/
margin: 0;
width: auto;
height: 30px;
padding: 0;
line-height: 1;
display: block;
position: relative;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
padding-left: 100px;
}
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
/*background: white;*/
/*float: left;*/
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
/*width: 175px;*/
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li ul li{
float: left;
position: relative;
width: 200px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #fff;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
/*background: #ddd;*/
background: #A0A0A0;
}
#main_nav li li:hover, #main_nav li li:hover li {
/*background: #bbb;*/
background: #353535;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
#main_nav ul li .active a{
text-decoration: underline;
}
<div id="header">
<a href="/index.php"><div id='logo'></div></a>
<div id='main_nav'>
<ul>
<li class=''>
<a href='#'>About Us</a>
<ul>
<li><a href='#'>News</a></li>
<li><a href='#'>Links</a></li>
</ul>
</li>
<li class=''>
<a href='#'>Town Departments</a>
<ul>
<li><a href='#'>Water Board</a></li>
<li><a href='#'>Parks and Rec.</a></li>
<li><a href='#'>Sanitation</a></li>
<li><a href='#'>Streets</a></li>
</ul>
</li>
<li class=''>
<a href='#'>Public Safety</a>
<ul>
<li>
<a href='#'>Fire Dept</a>
<ul>
<li><a href='/fire_officers-personnel.php'>Officers and Personnel</a></li>
<li><a href='/fire_training.php'>Training</a></li>
<li><a href='/fire_photos.php'>Photos</a></li>
</ul>
</li>
<li>
<a href='#'>Police Dept</a>
<ul>
<li><a href='#'>Officers and Personnel</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>FAQ</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
@导入url(http://fonts.googleapis.com/css?family=PT+Sans:400700);
#主导航{
/*背景#4cb6ea*/
保证金:0;
宽度:自动;
高度:30px;
填充:0;
线高:1;
显示:块;
位置:相对位置;
字体系列:“PT Sans”,无衬线;
字体大小:粗体;
左侧填充:100px;
}
* {
保证金:0;
填充:0;
}
身体{
字体:300 15px/1.5“Helvetica Neue”,Helvetica,arial,无衬线;
背景:#333;
利润率:15px;
}
文章{
宽度:600px;
保证金:0自动;
背景:#000;
颜色:#fff;
边界半径:5px;
盒影:0 0 15px 2px#666;
}
部分{
清除:左;
}
h1{
字体大小:45px;
字号:100;
字母间距:15px;
文本对齐:居中;
}
h1,#主要内容,#狗链接{
填充:15px;
}
p{
利润率:15px0;
}
a{
颜色:#06c;
}
#主导航{
/*背景:白色*/
/*浮动:左*/
-webkit转换:.5s;
过渡:.5s;
}
#主导航李{
浮动:左;
位置:相对位置;
/*宽度:175px*/
列表样式:无;
-webkit转换:.5s;
过渡:.5s;
}
#主导航系统{
浮动:左;
位置:相对位置;
宽度:200px;
列表样式:无;
-webkit转换:.5s;
过渡:.5s;
}
#主导航>ul>li>a、h1{
文本转换:大写;
}
#主导航a{
显示:块;
文字装饰:无;
填充:5px15px;
颜色:#fff;
}
#主导航ul{
位置:绝对位置;
左:0;
最高:100%;
可见性:隐藏;
不透明度:0;
}
#主导航{
左:100%;
排名:0;
}
#主导航李:悬停,#主导航李:悬停李{
/*背景:ddd*/
背景:#a0;
}
#主导航李:悬停,#主导航李:悬停李{
/*背景:#bbb ;*/
背景:#3535;
}
#主导航李:悬停{
背景:#999;
}
#主导航李:悬停>ul{
能见度:可见;
不透明度:1;
}
#主导航ul li.主动a{
文字装饰:下划线;
}
-
-
-
-
-
请您发布JSFIDLE以便直接调查。感谢.MS在2016年1月放弃了支持,用户统计数据约为1%,为什么要尝试修复类似浏览器上的错误?总的来说,IE可能不会被广泛使用,但我知道很多使用这个网站的人都会使用旧电脑。他们使用的一些系统也不能在IE10或更低版本的浏览器上运行,所以对他们来说这是非常必要的。他们可以在网站上使用不同的浏览器,但我知道他们中的许多人不是很精通计算机,最终会感到困惑。即使数量很小,但我还是希望我创建的网站在几乎任何浏览器上都能正常运行,而不是人们访问一个上面有我名字的网站,而且它完全无法使用。