CSS菜单中的下拉列表仅在IE中停止工作

时间:2013-08-21 16:05:13

标签: css internet-explorer drop-down-menu

我对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提前!!

0 个答案:

没有答案