div里面嵌套了ul，为什么div的高度小于ul高度

Question

div高度见阴影部分

ul高度见阴影部分

实现的html代码如下：
<div class="navBar">

        <ul>
            <li>
                <div id="hot"  onclick="show(id)">热门</div>
            </li>
            <li>
                <div id="today"  onclick="show(id)">推荐</div>
            </li>
        </ul>
    </div>

css代码如下：

.navBar {

clear: both;
width: 100%;
border: solid;
/*border-top: solid;*/
border-bottom: solid;
border-width: 1px;
border-color: #dddddd;
margin:0px;
height: 1.5em;

}

.navBar ul {

width: 100%;
height: inherit;
background-color: white;
margin-top: 8px;
text-align: center;
padding-left: 10px;
padding-bottom: 0px;
margin-bottom: 0px;

}

.navBar ul li{

float: left;
display: inline-block;
vertical-align: middle;
list-style: none;
padding-right: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
height: inherit;

}
.navBar ul li div{

clear: both;
font-size: 14px;
color: #929292;
height: inherit;
margin-left: 0px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
/*padding-bottom: 0.6em;*/

/*border-bottom: solid;*/
/*border-color: #00B7FF;*/
/*border-width: 2px;*/

}

Answer 1

li设置了浮动后影响到父级了，清楚浮动：clear: both;overflow：hidden;
仅仅clear: both;达不到清除浮动效果的

Answer 2

看不懂你的意思，但是看你的写法，写多了很多不必要的代码~