无法沿页面长度对齐下拉菜单

Question

我需要沿着页面的长度对齐下拉菜单。我有菜单：

<ul class="nav navbar-nav menu">
        <li><a href="#">About the company</a>
            <img src="images/arr1.png" ></img>
            <ul>
                <li class="first_li"><a href="#">Mission</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Vacancy</a></li>
                <li><a href="#">Best Experts</a></li>
            </ul>
        </li>
   </ul>

然后我有一些css样式，使这个下拉菜单在我认为正确的方式对齐。但它不能正常工作。

.menu li{
    list-style: none;
    float: left;
    line-height:84px;
}

.menu li:hover > ul {
    display: block; 
    background-color: rgb(231,231,231);
    position:absolute;
    top:84px;
    left : 0px;
    width: 100%;
    text-align:center;
    padding:0;
    z-index:1;
}
.menu .language:hover > ul {
    display:block; 
    width:84px;
    line-height:30px;
 }

Answer 1

问题的一部分看起来是您的大部分列表样式都在"悬停"部分。试着把它放在通用菜单风格中。