Question

我有一个导航栏，在Chrome和＆amp ;; Mozilla，但在IE中无法正常工作。

当你将mopue悬停在我们左右的选项卡上时，下拉应该会出现，但它会进入内联状态。并且背景位置也不正确。请帮助

代码： CSS：

#nav {
   width : auto;
   height : 25px;
   margin : 10px auto;
   padding : 5px;
}

#nav ul {
   margin : 17px auto;
   padding : 0px;   
   text-align: center;  
}

#nav ul li {
   display: inline-block;
   list-style: none;
}

#nav ul li a {
   text-decoration :none;
   color: #175587;
   font-size: 15px;
   width : auto;
   padding: 5px 1px 5px 1px;
   height: 35px;
   box-shadow: 3px 3px 8px gray;    
   background: url(../images/listback.png);
}

#nav ul li a:hover, #nav ul li a.current {
   background: url(../images/hoverback.png);
   color: white;
}

#nav li ul { 
   display: none; 
   position: absolute;  
}

#nav li:hover ul { 
   display: block; 
   z-index: 10; 
   margin: 0px 0px 0px 0px; 
   background: url(../images/down2.png) no-repeat; 
   background-position: 13% 5%; 
   padding: 65px 0px 0px 0px;
}

#nav li ul li { 
   float: none; 
   display: block; 
}

#nav li ul li a { 
   width: 155px;
   height: auto;
   margin: 0px 0px 0px 0px ;
   padding: 5px 0px 5px 5px;
   float: left;
   background : rgba(29, 71, 113, 0.8);
   font-size: 15px;
   text-align: left;
   text-decoration: none;
   font-weight: bold;
   color: white;    
   text-transform: uppercase;
   outline: none;
   box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   display: block;
}

HTML： -

<div id="nav">
    <ul>
        <li><a href="index.html" class="current">Home</a>
        </li>
        <li><a href="">About Us</a>

            <ul>
                <li><a href="profile.html">Group Profile</a>
                </li>
                <li><a href="management.html">Management Profile</a>
                </li>
                <li><a href="milestones.html">Milestones</a>
                </li>
                <li><a href="vision.html">Vision & Missions</a>
                </li>
            </ul>
        </li>
        <li><a href="">AGP</a>
        </li>
        <li><a href="">Products</a>
        </li>
        <li><a href="">Infrastructure</a>
        </li>
        <li><a href="">Support</a>
        </li>
        <li><a href="">Culture</a>
        </li>
        <li><a href="">Certification</a>
        </li>
        <li><a href="">Contact Us</a>
        </li>
    </ul>
</div>

请帮助。

Answer 1

我添加了float：left并清除了#nav li ul li（如下所示）

#nav li ul li { 
    float:none; 
    display:block; 
    float:left;
    clear:both;
}

这是一个在IE中工作的演示 - ＆gt; http://jsfiddle.net/5kWJz/

下拉菜单在IE中无法正常显示

1 个答案: