前端:纯css实现下拉菜单

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 会换行显示，浮动清除了，父元素撑大