下拉navi不工作，即7？ [英] Drop Down navi is not working ie 7?

问题描述

我在css中新建了一个下拉菜单。

Chrome，firefox，safari运行正常，但IE7没有显示下拉菜单。

请任何身体帮助我

css

  .cl {clear：both;} 
 #navi {
 background：＃0082c8; 
 position：relative; 
 margin-top：15px; 
} 
 #navi：after {
 position：absolute; 
 content：; 
 left：0; 
 right：0; 
 top：0; 
 height：5px; 
 background：＃00a7ff; 
 border-top：1px solid＃0285cb; 
 border-bottom：2px solid＃0068a6; 
 box-shadow：inset 0 0 0 1px＃26c6f8; 
} 
 
 #navi：before {
 position：absolute; 
 content：; 
 left：0; 
 right：0; 
 bottom：0; 
 height：5px; 
 background：＃00a7ff; 
 border-top：1px solid＃0285cb; 
 border-bottom：2px solid＃0068a6; 
 box-shadow：inset 0 0 0 1px＃26c6f8; 
} 
 
 
 #navi> li {
 float：left; 
 margin：0 10px; 
 position：relative; 
 padding：14px 0; 
} 
 
 #navi li a，.subnavi li a {
 color：white; 
 text-decoration：none; 
 display：inline-block; 
 line-height：29px; 
 padding：0 13px; 
 font-size：16px; 
 font-family：arial; 
 text-shadow：0px 2px 2px＃034e9f; 
 filter：dropshadow（color =＃034e9f，offx = 0，offy = 2）; 
} 
 
 #navi> LI：hover> a，li：hover> a，#navi li a.active {
背景：＃055c9f; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
 -webkit-box-shadow：inset 0px 3px 3px 0px＃042960; 
 -moz-box-shadow：inset 0px 3px 3px 0px＃042960; 
 box-shadow：inset 0px 3px 3px 0px＃042960; 
 border：1px solid＃009ada; 
 color：＃f7cf00; 
 line-height：27px; 
 padding：0 12px; 
} 
 
 .subnavi {
 position：absolute; 
 display：none; 
 top：51px; 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
 -webkit-box-shadow：0px 0px 3px 1px＃979395; 
 -moz-box-shadow：0px 0px 3px 1px＃979395; 
 box-shadow：0px 0px 3px 1px＃979395; 
 background：＃0082c8; 
 border：1px solid＃005890; 
 padding：10px 0; 
 white-space：nowrap; 
} 
 
 #navi li：hover .subnavi {
 display：block; 
 
} 
 #navi .subnavi li {
 margin：0; 
} 
 #navi .subnavi li a {
 display：block; 
 font-size：13px; 
 padding：0 15px; 
 border-radius：0; 
 line-height：27px; 
} 
 #navi .subnavi li a：hover {
 padding：0 15px; 
 border-radius：0; 
 border-left：0; 
 border-right：0; 
 line-height：25px; 
} 
 
 
 
  

HTML

 < ul id =navi> 
< li>< a href =class =active>关于< / a>< / li& 
< li>< a href =>服务< / a> 
< ul class =subnavi> 
< li>< a href => Web开发< / a>< / li> 
< li>< a href => WordPress< / a>< / li> 
< li>< a href =>平面设计< / a>< / li> 
< li>< a href =>图标设计< / a>< / li> 
< li>< a href =>运动图形< / a>< / li> 
< / ul> 
 
< / li> 
< li>< a href =>作品< / a>< / li> 
 
< div class =cl>< / div> 
< / ul> 
  

在此链接 http://jsfiddle.net / rohitazad / 3qPbE / 11 /

解决方案

Hi这不是答案， 。

已使用float：left;你可以尝试使用display：inline-block;并为IE添加hack：

缩放：1;

* display：inline;

尝试这个。如果其工作尝试下一次向前删除：inline-block;

I have make a new dropdown navi in css .

Chrome, firefox, safari is running fine but IE7 is not show of drop-down .

Please could any body help me

css

.cl{clear:both;}
#navi{
    background:#0082c8;
    position:relative;
    margin-top:15px;
}
#navi:after{
    position:absolute;
    content:"";
    left:0;
    right:0;
    top:0;
    height:5px;
    background:#00a7ff;
    border-top:1px solid #0285cb;
    border-bottom:2px solid #0068a6;
    box-shadow:inset 0 0 0 1px #26c6f8;
}

#navi:before{
    position:absolute;
    content:"";
    left:0;
    right:0;
    bottom:0;
    height:5px;
    background:#00a7ff;
    border-top:1px solid #0285cb;
    border-bottom:2px solid #0068a6;
    box-shadow:inset 0 0 0 1px #26c6f8;
}


#navi > li{
    float:left;
    margin:0 10px;
    position:relative;
    padding:14px 0;
}

#navi li a, .subnavi li a{
    color:white;
    text-decoration:none;
    display:inline-block;
    line-height:29px;
    padding:0 13px;
    font-size:16px;
    font-family:arial;
    text-shadow: 0px 2px 2px #034e9f;
    filter: dropshadow(color=#034e9f, offx=0, offy=2); 
}

#navi > li:hover > a, li:hover > a , #navi li a.active{
    background:#055c9f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: inset 0px 3px 3px 0px #042960;
    -moz-box-shadow: inset 0px 3px 3px 0px #042960;
    box-shadow: inset 0px 3px 3px 0px #042960;
    border:1px solid #009ada; 
    color:#f7cf00;
    line-height:27px;
    padding:0 12px;               
}

.subnavi{
    position:absolute;
    display:none;
    top:51px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    -webkit-box-shadow: 0px 0px 3px 1px #979395;
    -moz-box-shadow: 0px 0px 3px 1px #979395;
    box-shadow: 0px 0px 3px 1px #979395; 
    background:#0082c8;
    border:1px solid #005890;
    padding:10px 0;
    white-space:nowrap;
}

#navi li:hover .subnavi{
    display:block;

}
#navi .subnavi li{
    margin:0;
}
#navi .subnavi li a{
    display:block;
    font-size:13px;
    padding:0 15px;
    border-radius:0;
    line-height:27px;
}
#navi .subnavi li a:hover{
    padding:0 15px;
    border-radius:0;
    border-left:0;
    border-right:0;
    line-height:25px;
}


​

HTML

<ul id="navi">
    <li><a href="" class="active">About</a></li>
    <li><a href="">Services</a>
        <ul class="subnavi">
            <li><a href="">Web Development</a></li>
            <li><a href="">WordPress</a></li>
            <li><a href="">Graphic Design</a></li>
            <li><a href="">Icon Design</a></li>
            <li><a href="">Motion Graphics</a></li>    
        </ul>

    </li>
    <li><a href="">Works</a></li>

    <div class="cl"></div>
</ul>​

Thanks in advacned.

Link here http://jsfiddle.net/rohitazad/3qPbE/11/

解决方案

Hi This is not the answer but its just a thought from my side.

Insted of using float: left; you can try with display:inline-block; and add hack for IE:

Zoom:1;
*display:inline;

Try just this. If its working Try next time onwards Disply:inline-block;

这篇关于下拉navi不工作，即7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！