使用：after清除不了浮动

Question

一个典型的横向二级菜单
Html

<ul class="nav">
        <li><a href="#">订单管理</a>
             <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        <li><a href="#">订单管理</a>
            <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        <li><a href="#">订单管理</a>
             <ul>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            <li class="clearfix"><a href="#">订单管理</a></li>
            </ul>
        </li>
        </ul>
        

css

.nav {display:block;position:absolute;right:280px;height:70px;background-color: #fff;}
.nav li {float:left;width:90px;text-align:center;zoom:1;}
.nav li a {display:block;width:90px;height:70px;line-height:70px;font-size:14px;color:#444;}
.nav li a:hover{ color:#01a796;font-size:18px;}
.nav li ul {/*overflow:hidden;*/width:90px;display:none;margin-top:1px;background-color: #fff;border:1px solid #01a796;}
.nav li ul li a{width:90px;height:34px;line-height:34px;}
.nav li ul li:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
.nav li:hover ul{display:block;}

问题：
.nav li加了float，二级li继承了浮动
但使用：after这种方法无法生效，请问各位大神哪里出了问题？

Answer 1

很多重复的样式啊 而且浮动主要是因为.nav li{float:left}把所有li子元素都浮动了，再一层层清除很麻烦，而且如果是多级下拉菜单你要手动给每一层清除浮动。。

等饭时间简单写了个，可以看看：
https://jsfiddle.net/pfxfvLff/1/

Answer 2

.nav:after{content:'';clear:both;display: block;}

不应该在li上面 使用:after

Answer 3

.nav和.nav ul都需要清楚浮动。所以在.nav和.nav ul上面都需要加上清楚浮动。
你可以直接提出一个公用class。比如clearfix:after{display:block; content:""; height:0; clear:both; overflow:hidden; visibility:hidden;}
然后在浮动的父级元素上面加上clearfix类就OK了

Answer 4

需要清除二级li 的浮动吗？ float：none