CSS和IE 8问题与下拉菜单

时间:2014-01-01 18:54:17

标签: css internet-explorer

下拉菜单未在顶级菜单按钮下对齐。任何线索如何解决这个问题? (我收到一条错误消息,告诉我必须添加更多文本,所以这里有)。当您翻转顶级菜单选项时,下方会显示一个下拉菜单。但是,在IE 8中,选项不会下拉到菜单项下,而是刷新到页面的左侧。这是网站:http://www.aerlawgroup.com

HTML:

<div id="nav-wrap">
        <div class="container">
            {menu}
            <div style="clear:both"></div>
        </div>
    </div>

CSS:

#nav-wrap .container{/*controls spacing above menu */
    clear: both;
    overflow: hidden;
    position: relative;
    padding: 14px 0px 0px 0px;
}
#nav-wrap {
    clear: both;
    padding:0;
    margin:0;
}
#nav-wrap .container ul {
    list-style: none;
    float: none;
    border-top:4px solid #5178a7;
    background:#242b38 url(nav-blue.png) repeat-x;
    overflow:hidden !important;
}

#nav-wrap .container ul li,
#icontent #nav-wrap .container ul li,
#icontent #nav-wrap .container ul li:last-child{
    list-style: none;
    float: left;
    padding:0 1px 0 0;
    background:url(nav-sep.png) right center no-repeat;
    display:block;
}
    #nav-wrap .container ul li:last-child,
    #icontent #nav-wrap .container ul > span:last-child li{
        background:none;
        padding:0;
    }
    #nav-wrap .container ul li#active,
    #icontent #nav-wrap .container ul li#active{
        background:none;
        padding:0;
    }
#nav-wrap .container ul li a{
    float:left;
    display:inline-block;
    color: #afbbcd;
    font-size:16px;
    text-decoration: none;
    font-family: 'Trade Gothic LT Std', 'Myriad Pro', Arial, Helvetica, sans-serif;
    padding:0px 30px 0px;
    border:0;
    outline:0;
    line-height:59px;
    height:59px;
    list-style-type:none;
    text-transform:capitalize;
    overflow:hidden;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover{
    color: #fff;
    background:url(nav-current-blue.png) repeat-x;
} 

/****************************** flyout menus ******************************/

#wsite-menus .wsite-menu{
    margin-left:0px;
    background:url(submenu-inner-blue.png) repeat-y;
}
#weebly-menus > .wsite-menu-wrap > .weebly-menu{
    background: #446999 url(submenu-blue.png) right top repeat-y;
    margin-left:0;
}
#wsite-menus .wsite-menu li{

}

#wsite-menus .wsite-menu li a{
    text-transform:capitalize;
    font-weight:normal;
    font-family: 'Trade Gothic LT Std', 'Myriad Pro', Arial, Helvetica, sans-serif;
    padding:12px 15px;
    font-size:14px;
    color:#fff;
    border:0;
    background:none;
    margin-right:1px;
}

#wsite-menus .wsite-menu li a:hover{
    background-color: #577ba7 !important;
    }
#wsite-menus span.wsite-menu-title{
    padding:0;
}

#weebly-menus .weebly-menu li, #wsite-menus .wsite-menu li {width:170px;}
/* main  */
#wrap-in{
    background: #efefef url(tall-wrap-in-blue.png) center top repeat-x;
    padding:5px 0 0;
}

0 个答案:

没有答案
相关问题