html - 下拉菜单(ul li kind)在ie中不起作用

标签 html css

我正在尝试在这个网站上做一个跨浏览器兼容的下拉菜单: jsfiddle.net (检查html/css文件中id为listdelete的标签，javascript用于其他目的) 但我的问题是这个版本的 ul 标签设置为“主菜单”在 chrome/firefox 上完美运行，但它不会在 ie 上运行，因为(我不知道为什么)菜单没有弹出。 我试图将第一个 #listdelete 标签更改为标签的 leftcont div 并且弹出菜单但链接不起作用(我想那是因为链接女巫是标签在列表中不起作用，因为主要列表本身就是一个标签) 对于任何事情，只需在评论中提问 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;
}

最佳答案

我认为问题在于 IE 不理解带有标签“li”的“悬停”属性。它只适用于标签“a”。尝试通过插入带有链接而不是列表元素的“if ie” block 来解决您的问题。这是一个示例(任务略有不同，但仍然有帮助):http://jsfiddle。网/xan9gtde/

注意，注释的 CSS block 必须在不同的 CSS 文件中，仅适用于 IE。

关于html - 下拉菜单(ul li kind)在ie中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33849600/

上一篇：css - 如何在一个圆上获得多个底部边框

下一篇：css hover 效果固定到 dev 元素，滚动时不扩展

相关文章：

html - 我如何设置包括文本和图像在内的整个 Logo 的样式以成为主页的链接？

javascript - 如何停止在移动设备上滚动完整日历？

javascript - jquery mouseenter 在尺寸大于父 div 的子 div 上

css - 如何水平对齐图像和文本(主页菜单)

jquery - 从链接弹出div

html - css hover 想显示一个框

javascript - 将表格单元格上的点击重定向到其中的 <a>

html - 并行下拉多级菜单

javascript - 如何翻转具有特定方向的图像

javascript - 在 IE 中设置为自动后获取 div 的高度

©2024 IT工具网  联系我们