HTML怎么做这个下拉菜单

 我来答
猪八戒网
2023-05-18 · 百度认证:重庆猪八戒网络有限公司官方账号
猪八戒网
向TA提问
展开全部

select标签实现。 注:如果是联动下拉菜单的话,需要通过js动态处理select中的option纯css三级下拉菜单,下面是样式表

/* common styling */

.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}

.menu ul {padding:0; margin:0;list-style-type: none; }

.menu ul li {float:left; margin-right:1px; position:relative;}

.menu ul li ul {display: none;}

/* specific to non ie browsers */

.menu ul li:hover a {color:#fff; background:#36f;}

.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}

.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

.menu ul li:hover ul li:hover ul.left {left:-105px;}

  • 官方电话
  • 官方服务
    • 官方网站
    • 八戒财税
    • 知识产权
    • 八戒服务商
    • 企业需求
    • 数字市场
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式