Question

我正在尝试在此网站中执行跨浏览器兼容的下拉菜单： jsfiddle.net （在html / css文件中检查带有id listdelete的标签，javascript用于其他目的）但我的问题是这个版本的ul标签设置为“主菜单”完美适用于chrome / firefox，但它不会工作，因为（我不知道为什么）菜单没有弹出。我试图将第一个#listdelete标签更改为leftcont div到标签，弹出菜单但链接不起作用（我猜这是因为链接女巫是标签在列表中不起作用，因为主要list是一个标签本身）对于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="../immagini/slide1.jpg"     border="0"style="width:100%;height:100%;"/>
                            <img id="2"style="border-radius:     18px;width:100%;height:100%;" src="../immagini/slide2.jpg"     border="0"style="width:100%;height:100%;"/>
                            <img id="3"style="border-radius:     18px;width:100%;height:100%;" src="../immagini/slide3.jpg"     border="0"style="width:100%;height:100%;"/>
                            <img id="4"style="border-radius:     18px;width:100%;height:100%;" src="../immagini/slide4.jpg"     border="0"style="width:100%;height:100%;"/>
                            <img id="5"style="border-radius:     18px;width:100%;height:100%;" src="../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;
}

Answer 1

我认为问题在于IE并不理解＆＃34; hover＆＃34;带标签的属性＆＃34; li＆＃34;。它仅适用于标签＆＃34; a＆＃34;。尝试通过插入＆＃34; if ie＆＃34;来解决您的问题。带链接而不是列表元素的块。这是一个例子（一个不同的任务，但仍然可以提供帮助）：http：// jsfiddle。净/ xan9gtde /

请注意，评论的CSS块必须位于不同的CSS文件中，仅适用于IE。

下拉菜单（ul li kind）不在ie中工作

1 个答案: