checked状态同步与下拉列表实例页面

CSS代码：

.bar {
    background-color: #e3e4e5;
    color: #888;
    padding-left: 40px;
}
.nav {
    display: inline-block;
    padding: 5px 28px;
    text-indent: -15px;
}
.nav::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    margin: 4px 0 0 .5ch;
    background: url(./arrow-on.svg) no-repeat;
    background-size: 100% 100%;
    transition: transform .2s;
}
.nav.active,
.nav:hover {
    background-color: #fff;
    box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
}
.nav.active::after {
    transform: rotate(180deg);
}
.nav.active::before {
    content: '';
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
}
.box {
    position: absolute;
    border: 1px solid #ddd;
    border-top: 0;
    background-color: #fff;
    min-width: 100px;
    padding: 5px 0;
    margin-left: 40px;
    z-index: 1;
}
.box:not(.active) {
    display: none;
}
.box a {
    display: block;
    padding: 5px 10px;
    color: inherit;
}
.box a:hover {
    background-color: #f0f0f0;
}
.box sup {
    position: absolute;
    color: #cd0000;
    font-size: 12px;
    margin-top: -.25em;
}

HTML代码：

<div class="bar">
    <label class="nav" for="any"><input id="any" type="checkbox" hidden>我的消息</label> 
</div>
<div class="box" for="any">
    <a href>我的回答<sup>12</sup></a>
    <a href>我的私信</a>
    <a href>未评价订单<sup>2</sup></a>
    <a href>我的关注</a>
</div>
<p class="remind">//zhangxinxu: 这里放一段文字表明上面的是悬浮效果。</p>

JS代码：

<script src="smart-for.js"></script>