我对css menue的下拉列表有问题,但仅限于Internet Explorer !! 下拉列表在firefox,opera和chrome中运行良好 问题非常复杂,我真的不知道从哪里开始搜索错误。 它必须在IE中工作(我在Win7上使用Internet Explorer 10)
菜单最初来自cssmenumaker,来自它们的指令html包含一个menue的演示,也可以在Internet Explorer中使用。
我也很确定这些菜单在Internet Explorer中有效。因为我使用的是Firefox,我没有在其他浏览器中每隔5分钟检查一次该网站,所以我无法真正说出我最后“改变了什么”。
我做的最后一件大事就是为单个页面添加div,每个页面为一页, 我写了js-function,我用它来淡化beetwenn“网站”,将所有Content / subsite div的不透明度改为0(淡出),淡入点击菜单中的那个。
最初有/ a href ='#'> menueitem / a&gt ;,我删除了href ='#',因为我不使用它,我正在使用onclick() - 每个按钮上的事件。还试图把它放回去,不是吗。
我真的不认为它与整个onclick()函数有关,因为子网站div的工作也在Internet Explorer中工作,但只是下拉列表没有出来。
也许smth with display:在某些方面,但我只是改变了位置:top:并显示子网站div与onclick函数,没有来自menue的ul,li。 ?!?
我希望我已经根据需要清楚地描述了问题,找到错误, 代码有点大,所以起初我只是给测试站点一个链接。
首先是测试网站的链接: http://lackdoktor-lcb.de/test/test.html
我希望有人可以在Firefox / Chrome / Opera和Internet Explorer之间找到错误或者它是一个已知问题。
如果您需要特定代码,请告诉我们,发布所有完整的网站代码和所有css的代码在这里我认为太多了
这是我的网站css:
/*
Design by m@st€r256
*/
body
{
margin: 0; padding: 0;
background: #f5f5f5 repeat top left;
text-align: justify;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.1em;
color: navy;
min-width: 1024px;
}
a:link, a:visited, a
{
color: inherit; text-decoration: underline;
}
a:hover
{
text-shadow: white 0 0 0.2em;
cursor: pointer;
}
h1
{
text-indent: 25px; text-decoration: underline overline;
text-transform: uppercase;
}
#contact-flyover
{
width: 200px; height: 240px;
border: medium; border-color: navy; border-style: solid;
background: Navy url(images/brg1.gif);
position: absolute; z-index: 229;
top: 50; float: right; right: 16;
display: block;
text-align: center;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.1em;
color: navy;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
transform: rotate(7deg);
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari and Chrome */
}
#logobar2 /* BLACK */
{
background: black repeat center top;
position: absolute; z-index: 20;
min-width: 1200px; height: 250px; width: 96%;
top: 25px; left: 2%;
/*halb und halb 1*/
border-top-left-radius: 50% 100%;
border-top-right-radius: 25px 25px;
border-bottom-right-radius: 50% 100%;
border-bottom-left-radius: 25px 25px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
}
#handwerklogo
{
width: 250px; height: 100px;
position: absolute; z-index: 229;
top: 200px; float: left; left: 10px;
display: block;
text-align: right;
font-size: large;
text-shadow: #f3f3f3 0.1em 0.1em 0.1em;
color: white;
}
#cssmenu
{
background: silver repeat center top;
position: absolute; z-index: 9;
min-width: 1024px; height: 75px; width: 80%;
top: 255px; left: 10%;
margin-left: auto;
margin-right: auto;
text-shadow: gray 0.1em 0.1em 0.1em;
border-radius: 15px;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
text-align: center;
}
img.displayed
{
display: block; margin: -10px auto 0 auto;
}
img.bigimage
{
position: relative;
float: right;
top: -85px; right: 5px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
margin-left: 35px;
margin-bottom: -75px;
}
img.roundedtop
{
border: medium; border-color: navy; border-style: hidden;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-moz-border-top-left-radius: 12px;
-moz-border-top-right-radius: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
}
table.menuetabelle
{
min-width: 1024px; height: 75px; width: 80%;
top: 280px; left: 10%;
}
table.menuetabelle td
{
font-size-adjust: 1;
font-weight: bold;
}
#content
{
position: relative;
margin: 10px;
border-radius: 10px;
background-color: #f5f5f5;
padding-bottom: 10px; padding-top: 10px; padding-left: 15px; padding-right: 15px;
}
#contentborder
{
background: silver repeat center top;
position: absolute; z-index: 8;
min-width: 1024px; width: 80%;
top: 350px; left: 10%;
margin-left: auto;
margin-right: auto;
margin-bottom: -80px;
text-shadow: gray 0.1em 0.1em 0.1em;
border-radius: 15px;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
}
#copyright
{
position: absolute;
z-index: 14;
min-width: 1024px; width: 100%; height: 35px; bottom: -45px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-shadow: gray 0.1em 0.1em 0.1em;
border-radius: 15px;
font-size: 15px;
text-align: right;
}
#home, #unfallschadenbeseitigung, #smartrepair, #beulendoktor, #teileservice, #motorradlackierung, #designlackierung,
#felgenservice, #kunststoffreperatur, #lackversiegelung, #lackaufbereitung, #innenaufbereitung, #fahrzeugreinigung, #leasingcheck,
#autoglas, #leihwagen, #gallerie, #impressum, #anfahrt
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#home
{
opacity: 1 ;
position: static;
}
#unfallschadenbeseitigung, #smartrepair, #beulendoktor, #teileservice, #motorradlackierung, #designlackierung,
#felgenservice, #kunststoffreperatur, #lackversiegelung, #lackaufbereitung, #innenaufbereitung, #fahrzeugreinigung, #leasingcheck,
#autoglas, #leihwagen, #gallerie, #impressum, #anfahrt
{
opacity: 0 ;
position: absolute;
top: -5000px;
}
来自menue的css:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.1em;
font-weight: bold;
color: navy;
min-width: 35px;
text-align: center;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
top: 30px; left:0;
margin: 0;
padding: 0;
text-align: left;
display:inline-block;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active > a {
background: #d9d9d9 url(images/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(images/grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 43px;
padding: 0 11px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #ffffff url(images/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
display: block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 15px;
text-shadow: gray 0.1em 0.1em 0.1em;
font-weight: normal;
color: navy;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
这里是“subsite-div-fading-function”js(如果它有帮助)
/*
Menuefunctions by m@st€r256
*/
function hideall()
{
document.getElementById('home').style.opacity='0';
document.getElementById('unfallschadenbeseitigung').style.opacity='0';
document.getElementById('smartrepair').style.opacity='0';
document.getElementById('beulendoktor').style.opacity='0';
document.getElementById('teileservice').style.opacity='0';
document.getElementById('motorradlackierung').style.opacity='0';
document.getElementById('designlackierung').style.opacity='0';
document.getElementById('felgenservice').style.opacity='0';
document.getElementById('kunststoffreperatur').style.opacity='0';
document.getElementById('lackversiegelung').style.opacity='0';
document.getElementById('lackaufbereitung').style.opacity='0';
document.getElementById('innenaufbereitung').style.opacity='0';
document.getElementById('fahrzeugreinigung').style.opacity='0';
document.getElementById('leasingcheck').style.opacity='0';
document.getElementById('autoglas').style.opacity='0';
document.getElementById('leihwagen').style.opacity='0';
document.getElementById('gallerie').style.opacity='0';
document.getElementById('impressum').style.opacity='0';
document.getElementById('anfahrt').style.opacity='0';
document.getElementById('home').style.position='absolute';
document.getElementById('unfallschadenbeseitigung').style.position='absolute';
document.getElementById('smartrepair').style.position='absolute';
document.getElementById('beulendoktor').style.position='absolute';
document.getElementById('teileservice').style.position='absolute';
document.getElementById('motorradlackierung').style.position='absolute';
document.getElementById('designlackierung').style.position='absolute';
document.getElementById('felgenservice').style.position='absolute';
document.getElementById('kunststoffreperatur').style.position='absolute';
document.getElementById('lackversiegelung').style.position='absolute';
document.getElementById('lackaufbereitung').style.position='absolute';
document.getElementById('innenaufbereitung').style.position='absolute';
document.getElementById('fahrzeugreinigung').style.position='absolute';
document.getElementById('leasingcheck').style.position='absolute';
document.getElementById('autoglas').style.position='absolute';
document.getElementById('leihwagen').style.position='absolute';
document.getElementById('gallerie').style.position='absolute';
document.getElementById('impressum').style.position='absolute';
document.getElementById('anfahrt').style.position='absolute';
document.getElementById('home').style.top='-5000';
document.getElementById('unfallschadenbeseitigung').style.top='-5000';
document.getElementById('smartrepair').style.top='-5000';
document.getElementById('beulendoktor').style.top='-5000';
document.getElementById('teileservice').style.top='-5000';
document.getElementById('motorradlackierung').style.top='-5000';
document.getElementById('designlackierung').style.top='-5000';
document.getElementById('felgenservice').style.top='-5000';
document.getElementById('kunststoffreperatur').style.top='-5000';
document.getElementById('lackversiegelung').style.top='-5000';
document.getElementById('lackaufbereitung').style.top='-5000';
document.getElementById('innenaufbereitung').style.top='-5000';
document.getElementById('fahrzeugreinigung').style.top='-5000';
document.getElementById('leasingcheck').style.top='-5000';
document.getElementById('autoglas').style.top='-5000';
document.getElementById('leihwagen').style.top='-5000';
document.getElementById('gallerie').style.top='-5000';
document.getElementById('impressum').style.top='-5000';
document.getElementById('anfahrt').style.top='-5000';
}
function home()
{
hideall();
document.getElementById('home').style.opacity='1';
document.getElementById('home').style.position='static';
}
function unfallschadenbeseitigung()
{
hideall();
document.getElementById('unfallschadenbeseitigung').style.opacity='1';
document.getElementById('unfallschadenbeseitigung').style.position='static';
}
function smartrepair()
{
hideall();
document.getElementById('smartrepair').style.opacity='1';
document.getElementById('smartrepair').style.position='static';
}
function beulendoktor()
{
hideall();
document.getElementById('beulendoktor').style.opacity='1';
document.getElementById('beulendoktor').style.position='static';
}
function teileservice()
{
hideall();
document.getElementById('teileservice').style.opacity='1';
document.getElementById('teileservice').style.position='static';
}
function motorradlackierung()
{
hideall();
document.getElementById('motorradlackierung').style.opacity='1';
document.getElementById('motorradlackierung').style.position='static';
}
function designlackierung()
{
hideall();
document.getElementById('designlackierung').style.opacity='1';
document.getElementById('designlackierung').style.position='static';
}
function felgenservice()
{
hideall();
document.getElementById('felgenservice').style.opacity='1';
document.getElementById('felgenservice').style.position='static';
}
function kunststoffreperatur()
{
hideall();
document.getElementById('kunststoffreperatur').style.opacity='1';
document.getElementById('kunststoffreperatur').style.position='static';
}
function lackversiegelung()
{
hideall();
document.getElementById('lackversiegelung').style.opacity='1';
document.getElementById('lackversiegelung').style.position='static';
}
function lackaufbereitung()
{
hideall();
document.getElementById('lackaufbereitung').style.opacity='1';
document.getElementById('lackaufbereitung').style.position='static';
}
function innenaufbereitung()
{
hideall();
document.getElementById('innenaufbereitung').style.opacity='1';
document.getElementById('innenaufbereitung').style.position='static';
}
function fahrzeugreinigung()
{
hideall();
document.getElementById('fahrzeugreinigung').style.opacity='1';
document.getElementById('fahrzeugreinigung').style.position='static';
}
function leasingcheck()
{
hideall();
document.getElementById('leasingcheck').style.opacity='1';
document.getElementById('leasingcheck').style.position='static';
}
function autoglas()
{
hideall();
document.getElementById('autoglas').style.opacity='1';
document.getElementById('autoglas').style.position='static';
}
function leihwagen()
{
hideall();
document.getElementById('leihwagen').style.opacity='1';
document.getElementById('leihwagen').style.position='static';
}
function gallerie()
{
hideall();
document.getElementById('gallerie').style.opacity='1';
document.getElementById('gallerie').style.position='static';
}
function impressum()
{
hideall();
document.getElementById('impressum').style.opacity='1';
document.getElementById('impressum').style.position='static';
}
function anfahrt()
{
hideall();
document.getElementById('anfahrt').style.opacity='1';
document.getElementById('anfahrt').style.position='static';
}
我真的希望有人可以帮助我!! THX提前!!