PHP如何写二级菜单,css如何写二级下拉菜单

css写二级下拉菜单的方法:首先创建一个HTML示例文件;然后使用css的display属性控制二级下拉菜单的显示与否;最后通过浏览器查看运行效果即可。

2fb54c2ac72f32413d8b757ebd52a59d.png

本教程操作环境:Dell G3电脑、Windows7系统、Chrome76.0&&CSS3版本。

纯CSS实现二级导航下拉菜单

思想:

使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签。由于实现起来比较简单,所以在这里直接给出了参考代码。

纯CSS二级导航下拉菜单代码

纯css二级导航下拉菜单

*{margin: 0;padding: 0;}

#bg{background: red;width: 100%;height: 35px;}

nav{height: 35px;width: 1000px;margin: 0 auto;}

nav ul li{list-style-type:none;float: left}

nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;

text-align: center;color:white;font-fimily:微软雅黑;}

nav ul li ul li{float: none}

nav ul li ul li a{color:black}

nav ul li ul{display: none;}

nav ul li:hover ul{display: block;}

运行效果:

5294c1d5b76c32a9476e2dbe34a37e27.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值