css内容：
.head .nav-box,.search-box,.search-info,.ul-box{
width: 1200px;
margin: auto;
outline: 1px solid red;
}
.pos_rel{
position: relative;
}
.ul-box > .menu {
height: 50px;
width: 100px;
background-color: red;
float: left;
position: relative;
left: 0;
opacity: 0;
z-index: 2;
}
.menu_tip{
display: block;
float: left;
position: absolute;
left:0;
width:100px;
height: 50px;
color: black;
z-index: 1;
background-color: red;
}
.ul-box > .hide{
display: none;
}
.ul-box > .menu:checked ~ .menu-ul{
display: block;
}
实现效果
这里clear右浮动的，menu-ul 会换行显示，浮动清除了，父元素撑大
