Toggle navigation
首页
热门资讯
资源下载
技术博客
会员
中心
会员中心
发布资讯
发布博文
发布资源
首页
文章中心
CSS/CSS3
一个新的CSS菜单代码
269 阅读
0 评论
178 点赞
我是
靠谱客
的博主
动听口红
,这篇文章主要介绍
一个新的CSS菜单代码
,现在分享给大家,希望可以做个参考。
<html> <head> <style> body { font-family: verdana, helvetica, arial, sans-serif; } #mainMenu { background-color: #EEE; border: 1px solid #CCC; color: #000; width: 203px; } #menuList { margin: 0px; padding: 10px 0px 10px 15px; } li.menubar { background: url(/images/plus.gif) no-repeat 0em 0.3em; font-size: 12px; line-height: 1.5em; list-style: none outside; } .menu, .submenu { display: none; margin-left: 15px; padding: 0px; } .menu li, .submenu li { background: url(/images/square.gif) no-repeat 0em 0.3em; list-style: none outside; } a.actuator { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } a.actuator:hover { text-decoration: underline; } .menu li a, .submenu li a { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none; } .menu li a:hover, submenu li a:hover { /*border-bottom: 1px dashed #000;*/ text-decoration: underline; } span.key { text-decoration: underline; } </style> </head> <body> <div id="mainMenu"> <ul id="menuList"> <li class="menubar"> Phones <ul id="productsMenu" class="menu"> <li> New Phones <ul id="newPhonesMenu" class="submenu"> <li>9290</li> <li>8390</li> <li>8290</li> <li>8270</li> </ul> </li> <li> Compare <ul id="compareMenu" class="submenu"> <li>All Phones</li> <li>Service Provider</li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后
以上就是
动听口红
最近收集整理的关于
一个新的CSS菜单代码
的全部内容,更多相关
一个新
内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(
178
)
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
本文分类:
CSS/CSS3
浏览次数:
269
次浏览
发布日期:2022-04-10 23:05:02
本文链接:
https://www.kaopuke.com/article/k-p-k_14_u_7_o_10_fw_13__7__26_0.html
相关文章
Java操作mongodb的模糊查询和精确查询
table合并单元格与img图片铺满整个td的html
Flash cs3仿真艺术设计 压扁与拉伸运用
js加减乘除丢失精度问题解决方法
一个新的CSS菜单代码
Photoshop自制细腻漂亮的黑白几何图案
cad图片边框怎么去除? cad中插入图片取消边框的教程
教你用ps把包包质感修出来
评论列表
共有
0
条评论
发表评论
取消回复
登录
注册新账号
立即
投稿
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
返回
顶部
发表评论 取消回复