css导航栏 qq抽屉

导航栏作为一个网站的重要组成部分，拥有良好的导航栏布局将方便用户的使用。而QQ抽屉式导航栏常常被用于响应式网站和手机端的网页设计，它的优点在于能够将导航栏的信息整理得更加紧凑和清晰。

/* css代码 *//* 隐藏checkbox */input[type="checkbox"]{
    display: none;
}
/* 设置导航栏样式 */#nav {
    font-size: 0;
     /* 去掉bug */border-top:1px solid #EEE;
}
#nav li {
    display: inline-block;
    position: relative;
    font-size: 16px;
 /* 调整字体大小 */}
#nav a{
    text-decoration:none;
    color:#999;
    padding: 10px 15px;
    display:block;
}
#nav a:hover{
    color: #000;
    background-color: #EEE;
}
/* 设置弹出菜单的样式 */#nav ul {
    position: absolute;
    z-index: 9999;
    border:1px solid #EEE;
    padding: 10px;
    display: none;
}
#nav li:hover ul{
    display: block;
}
#nav ul li{
    display:block;
}
    

代码中通过隐藏checkbox来控制导航栏的弹出菜单显示和隐藏，并且使用了CSS的伪类:hover属性来实现鼠标经过导航栏时的特效。另外，通过对导航栏li元素设置position:relative属性，确保了弹出菜单的位置是相对于导航栏的位置而不是相对于整个页面。

除此之外，还需要在HTML代码中加入一个包裹弹出菜单的ul元素，它的display属性默认为none，只有在鼠标经过导航栏li元素时，才会被设置为display:block来显示菜单选项。

总的来说，CSS导航栏QQ抽屉的实现也不算太难，只要理解了基本原理，稍微一点CSS调整就可以实现自己想要的效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！