html - 如何获取列表项以填充父级无序列表

Question

我试图让我的无序列表中的列表项填满整个列表。因为我有一个列表项是两个单词，所以它使 ul 变大了，但其他的没有填满空间，我只能翻过身来看到第二个 ul 并且无法让我的鼠标访问这些按钮。

这是HTML

        <div id="body_left_nav"> 
            <nav>
                <ul>
                    <li><a href="#">Property Management</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Brokerage</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Leasing</a>
                        <ul>
                            <li><a href="#">Commercial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Consulting</a> 
                        <ul>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Multi-Family</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

和 CSS

#body_left_nav{
    width: 100%;
    margin-left: 10px;
    height: 100%;
}
#body_left_nav a { 
    font-weight: bold; 
    color: #000; 
    font-size: 14px;
}
#body_left_nav  ul {
    width: 100%;
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #004A65 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%); 
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
#body_left_nav ul li {
    float: left;
    width: 25%;
}
#body_left_nav ul li:hover {
    background: #4b545f;    
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 40%);
}
#body_left_nav ul li a {
    display: block;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
#body_left_nav ul li a:visited {
    color: #fff;
}
#body_left_nav ul li:hover a {
    color: #fff;
}
#body_left_nav ul li:hover > ul {
    display: block;
    top: 100%;
}
#body_left_nav ul:after {
    clear: both; 
    display: block;
}
#body_left_nav ul ul {
    width: 25%;
    background: #5f6975; 
    border-radius: 0px;
    position: absolute; 
    display: none;
}
#body_left_nav ul ul li {
    width: 100%;
    float: none; 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #004A65 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%); 
    background: -webkit-linear-gradient(top, #C4DAE8 0%,#004A65 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-top: 1px solid #D32026;
    border-bottom: 1px solid #D32026;
    position: relative;
}
#body_left_nav ul ul li a {
    text-align: center;
    color: #fff;
}

编辑:这是 jsfiddle http://jsfiddle.net/bv9j8ra5/我不知道为什么整个导航和 ul ul 都缩进了。它在我的网站上没有这样做，但我仍然遇到列表项未填充父 ul 的问题。

编辑:这也可能有帮助。这是正在发生的事情的图像。我在“属性(property)管理”上没有差距，但我在另外 3 个上有差距。 [1]:http://i.stack.imgur.com/NbDnW.png

Answer 1

live Demo或者 full view Demo

你只需要重置

*{box-sizing:border-box;padding:0;margin:0;}

完整代码

*{box-sizing:border-box;padding:0;margin:0;}
#body_left_nav {
    width: 100%;
    height: 100%;
}
#body_left_nav a {
    font-weight: bold;
    color: #000;
    font-size: 14px;
}
#body_left_nav ul {
    width: 100%;
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #004A65 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%);
    background: -webkit-linear-gradient(top, #C4DAE8 0%, #004A65 100%);
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
#body_left_nav ul li {
    float: left;
    width: 25%;
}
#body_left_nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #C4DAE8 0%, #004A65 40%);
}
#body_left_nav ul li a {
    display: block;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
#body_left_nav ul li a:visited {
    color: #fff;
}
#body_left_nav ul li:hover a {
    color: #fff;
}
#body_left_nav ul li:hover > ul {
    display: block;
    top: 100%;
}
#body_left_nav ul:after {
    clear: both;
    display: block;
}
#body_left_nav ul ul {
    width: 25%;
    background: #5f6975;
    border-radius: 0px;
    position: absolute;
    display: none;
}
#body_left_nav ul ul li {
    width: 100%;
    float: none;
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #004A65 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #004A65 100%);
    background: -webkit-linear-gradient(top, #C4DAE8 0%, #004A65 100%);
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    border-top: 1px solid #D32026;
    border-bottom: 1px solid #D32026;
    position: relative;
}
#body_left_nav ul ul li a {
    text-align: center;
    color: #fff;
}

<div id="body_left_nav">
    <nav>
        <ul>
            <li><a href="#">Property Management</a>

                <ul>
                    <li><a href="#">Commercial</a>
                    </li>
                    <li><a href="#">Multi-Family</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Brokerage</a>

                <ul>
                    <li><a href="#">Commercial</a>
                    </li>
                    <li><a href="#">Multi-Family</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Leasing</a>

                <ul>
                    <li><a href="#">Commercial</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Consulting</a> 
                <ul>
                    <li><a href="#">Commercial</a>
                    </li>
                    <li><a href="#">Multi-Family</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>