/ / Падащо меню (ul li kind) не работи в ie - html, css

Падащото меню (ul li kind) не работи в т.н. html, css

Опитвам се да направя падащо меню, съвместимо с браузъра, което е в този сайт: jsfiddle.net (проверете етикетите с id listdelete в thehtml / cssfile и javascript е за други цели) Но моят проблем е, че тази версия с ul тагове, определени като "основното меню" работи перфектно на хром / огън, но тя "няма да работи на т.е., защото (не знам защо) менюто не се появи. Аз се опитах да промените първия #listdelete тагове в левия дял на етикети и менютата изскочи, но връзките не ще работят (предполагам, че е така, защото връзките, които са етикети не работят в списъка, защото основната Списъкът е сам по себе си) За anithing просто питам в коментари HTML:

        <div id="wrapperlink">
<ul>

<li><a id="temple"href="storia.html"/></a></li>
<li><a id="gallery"href="gallery.html"/></a></li>
<li><a id="play"href="video.html"/></a></li>
<li><a id="info"href="info.html"/></a></li>


</ul>
</div>
</div>
<div id="container">
<div id="leftcont">
<div class="wrapcont">
<div style="text-align:center;font-size:1.3em;"><b>Componenti aereo</b></div>

<ul class="listdelete">
<li>
<span><b>ALI</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>

<ul class="listdelete">
<li>
<span><b>CARRELLO</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span class="spanwidth"><b> CRUSCOTTO</b> </span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span><b>   ELICA</b></span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span>  <b>FUSOLIERA</b> </span>
<ul class="listdelete">
<li class="middle">
<a href="#">Disegni</a>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span><b>LONGHERONE</b> </span>
<ul class="listdelete">
<li class="middle">
<a>Disegni</a>
</li>
<li class="middle">
<a>Componenti</a>
</li>
<li class="middle">
<a href="menu laterali/longheroni/lavori/lavoro_longheroni.html">Lavori</a>
</li>

</ul>
</li>
</ul>
<ul class="listdelete">
<li>
<span>  <b>MOTORE</b> </span>
<ul class="listdelete">
<li class="middle">
<b>Disegni</b>
</li>
<li class="middle">
<b>Componenti</b>
</li>
<li class="middle">
<b>Lavori</b>
</li>

</ul>
</li>
</ul>
</div>
</div>



<div id="centercontpos">
<div id="centercont">
<div class="wrapcont">
<div id="desc">
<div style="text-align:center;width:100%;    height:auto;    font-size:1.3em;font-family:Lucida Sans Unicode;"><b></b>    </div><br>
<div style="text-align:center;width:100%;height:auto;font-size:1.1em;     font-family:Lucida Sans Unicode;"></div>
<br>
</div>
<div id="pusher1">
</div>
<div id="pic1">
<div id="slider">
<img id="1"style="border-radius:     18px;width:100%;height:100%;" src="/images/../immagini/slide1.jpg"     border="0"style="width:100%;height:100%;"/>
<img id="2"style="border-radius:     18px;width:100%;height:100%;" src="/images/../immagini/slide2.jpg"     border="0"style="width:100%;height:100%;"/>
<img id="3"style="border-radius:     18px;width:100%;height:100%;" src="/images/../immagini/slide3.jpg"     border="0"style="width:100%;height:100%;"/>
<img id="4"style="border-radius:     18px;width:100%;height:100%;" src="/images/../immagini/slide4.jpg"     border="0"style="width:100%;height:100%;"/>
<img id="5"style="border-radius:     18px;width:100%;height:100%;" src="/images/../immagini/slide5.jpg"     border="0"style="width:100%;height:100%;"/>
</div>
</div>

</div>
</div>
</div>
<div id="rightcont">
<div class="wrapcont">
<div id="lastarticlepos">
<div id="lastarticlediv">
<div style="border-bottom:1px solid black;">
<b>ULTIMI ARTICOLI</b>

</div>
</div>
</div>
</div>
</div>

</div>
<div id="footer">

</div>
</body>
</html>

CSS:

    body{
background-image:url("../immagini/polaroid.jpg");
background-size:cover;
height:100%;
width:100%;
margin:0;
padding:0;
min-width:1100px;
min-height:1000px;
}
body,html{
height:100%;width:100%;
min-width:1000px;
margin:0;
padding:0;
}
@media screen and (max-height: 900px){
#link{
position:relative;
width:100%;
height:20%;
background-color: rgba(255,246,0,0.9);

}
#wrapperlink{
position:relative;
width:90%;
height:90%;
margin-left:auto;
margin-right:auto;
}
#link ul{
position:absolute;
width:90%;
height:90%;
list-style:none;
margin:auto;
padding:0px;
}
#link li{
float:left;
width:4em;
height:100%;
margin-right:5%;
}
#link a{
float:left;
width:4em;
height:100%;
}
}
#logo{
position:absolute;
background-image:url("../immagini/logo.png");
width:14.563em;
height:100%;
background-size:contain;
background-repeat:no-repeat;
}
#title{
position:relative;
width:100%;
height:15%;
background-color: rgb(0,0,0);
}
#link{
position:relative;
width:100%;
height:8%;
background-image:url("../immagini/linkbg.png");
background-size:contain;
background-repeat:repeat-x;
}
#wrapperlink{
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
#link ul{
position:absolute;
width:100%;
height:100%;
list-style:none;
margin:auto;
padding:0px;
}
#link li{
float:left;
width:4em;
height:100%;
margin-right:5%;
}
#link a{
float:left;
width:4em;
height:90%;
}
#container{
position:relative;
min-width:100%;
height:85%;
background-color: rgba(136,136,136,0.9);
box-sizing:border-box;
}
#footer{
position:relative;
background-image:url("../immagini/footer.png");
width:100%;
height:20%;
background-size:cover;
background-repeat:no-repeat;
box-sizing:border-box;
bottom:0;
}
#home{
position:absolute;
background-image:url("../immagini/home1.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#temple{
position:absolute;
background-image:url("../immagini/storia.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#gallery{
position:absolute;
background-image:url("../immagini/gallery.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#info{
position:absolute;
background-image:url("../immagini/info.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
#play{
position:absolute;
background-image:url("../immagini/play.png");
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:contain;
}
.wrapcont{
position:relative;
width:100%;
height:100%;
}
#leftcont{
position:absolute;
border:black solid 2px;
height:100%;
width:20%;
left:0;
box-sizing:border-box;

}
#centercont{
position:absolute;
border:black solid 2px;
height:100%;
width:100%;
margin:auto;
background-color: rgba(200,80,30,0.9);
box-sizing:border-box;
}
#rightcont{
position:absolute;
border:black solid 2px;
height:100%;
width:20%;
right:0;
top:0;
box-sizing:border-box;
}
#centercontpos{
position:relative;
width:60%;
height:100%;
margin:auto;
box-sizing:border-box;
}
#engsite{
position:absolute;
top:0;
right:0;
background-image:url("../immagini/eng.png");
width:3em;
height:1.9215em;
background-size:contain;
border:2px solid grey;
}
#itasite{
position:absolute;
top:0;
right:0;
background-image:url("../immagini/itaflag.png");
width:3em;
height:1.9215em;
background-size:contain;
border:2px solid grey;
}
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
/*------------------------------------------------------------lateral bar opening--------------------------------*/
.listdelete{
position:relative;
list-style:none;
display:inline;
margin:0px;
padding:0px;
width:auto;
font-size:1em;
}
.listdelete>li{
text-align:center;
}
.spanwidth{
width:30px;
text-align:center;
}
.listdelete>li:hover span{
width:100%;
text-align:center;
background-color:red;
}
.listdelete>li>.listdelete>li{
display:none;
background-color:white;
width:auto;
margin:0;
height:auto;
}
.listdelete:hover li>.listdelete>li{
display:block;
background-color:white;
margin:0;
width:auto;
font-size:0.8em;
text-align:center;
}
.primo{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom:1px grey solid;
}
.ultimo{
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.middle{
border-bottom:1px grey solid;
}
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
/*------------------------------------------------------------lateral bar close--------------------------------*/
#desc{
border:black solid 2px;
border-radius: 25px;
position:relative;
width:100%;
height:auto%;
background-image:url("../immagini/descbg.png");
background-size:cover;
}
#pusher1{
position:relative;
width:100%;
height:5em;
}
#pic1{
border:black solid 2px;
border-radius: 18px;
margin:auto;
position:relative;
width:80%;
height:40%;
background-color:red;
}
.spancenter{
position:relative;
width:auto;
margin:auto;
}
#slider{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
#lastarticlepos{
position:absolute;
width:100%;
height:80%;
border:black solid 2px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
background-color:rgba(255,255,255,0.7);
box-sizing:border-box;
}

Отговори:

0 за отговор № 1

Мисля, че проблемът е, че IE не разбираатрибут "hover" с маркер "li". Прилага се само за маркер "а". Опитайте се да разрешите проблема си, като вмъкнете "if ie" блокове с връзки вместо елементи от списък. Ето един пример (малко по-различна задача, но все още може да помогне): http: // jsfiddle. Net / xan9gtde /

Обърнете внимание, че коментираният CSS-блок трябва да бъде в различен CSS-файл само за IE.


Свързани въпроси


Коментари (0)

Добави коментар