设为首页收藏本站
开启辅助访问 切换到窄版
搜索
第一问答网»论坛 › 中问网 › 问答 › 如何用纯CSS制作图片下拉菜单 导航菜单项宽度不同 请直 ...

如何用纯CSS制作图片下拉菜单 导航菜单项宽度不同 请直接复制代码

[复制链接]
查看11 | 回复5 | 2013-10-28 08:39:49 | 显示全部楼层 |阅读模式
<br/>
<br/>!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd<br/>html xmlns= http://www.w3.org/1999/xhtml<br/>head<br/>meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset=utf-8\\\" /<br/>meta name=\\\"robots\\\" content=\\\"all\\\" /<br/>title纯CSS的下拉菜单 支持IE6 IE7 Firefox/title <br/>style type=\\\"text/css\\\" <br/>*{margin:0;padding:0;} <br/>.menu{font-size:12px;position:relative;z-index:100;} <br/>.menu ul{list-style:none;} <br/>.menu li {float:left;position:relative;} <br/>.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} <br/>.menu table {position:absolute; top:0; left:0;} <br/>.menu ul li:hover ul, <br/>.menu ul a:hover ul{visibility:visible;} <br/>.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} <br/>.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;} <br/>.menu ul ul{} <br/>.menu ul ul li {clear:both;text-align:left;font-size:12px;} <br/>.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;} <br/>.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;} <br/>/style <br/>/head <br/><br/>body <br/><br/>div class=\\\"menu\\\" <br/>
ul <br/>
lia href=\\\"#\\\"XHTML/CSS <br/>
!--[if IE 7]!--/a!--![endif]-- <br/>
!--[if lte IE 6]tabletrtd![endif]-- <br/>
ul <br/>
lia href=\\\"#\\\"标准/a/li <br/>
lia href=\\\"#\\\"教程/a/li <br/>
lia href=\\\"#\\\"技术文章/a/li <br/>
lia href=\\\"#\\\"常见问题/a/li <br/>
lia href=\\\"#\\\"布局教程专题/a/li <br/>
lia href=\\\"#\\\"CSS菜单/a/li <br/>
lia href=\\\"#\\\"浏览器兼容/a/li <br/>
lia href=\\\"#\\\"滚动条相关/a/li <br/>
lia href=\\\"#\\\"圆角矩形专题/a/li <br/>
lia href=\\\"#\\\"CSS特效欣赏专题/a/li <br/>
/ul <br/>
!--[if lte IE 6]/td/tr/table/a![endif]-- <br/>
/li <br/>
lia href=\\\"#\\\"07艺术<br/>
!--[if IE 7]!--/a!--![endif]-- <br/>
!--[if lte IE 6]tabletrtd![endif]-- <br/>
ul <br/>
lia href=\\\"#\\\"网页教学网/a/li <br/>
lia href=\\\"#\\\"网页教学网/a/li <br/>
/ul <br/>
!--[if lte IE 6]/td/tr/table/a![endif]-- <br/>
/li <br/>
lia href=\\\"#\\\"Javascript <br/>
!--[if IE 7]!--/a!--![endif]-- <br/>
!--[if lte IE 6]tabletrtd![endif]-- <br/>
ul <br/>
lia href=\\\"#\\\"JSON/a/li <br/>
lia href=\\\"#\\\"技术文章/a/li <br/>
/ul <br/>
!--[if lte IE 6]/td/tr/table/a![endif]-- <br/>
/li <br/>
lia href=\\\"#\\\"DOM/a/li <br/>
lia href=\\\"#\\\"XML/a/li <br/>
lia href=\\\"#\\\"正则表达式 <br/>
!--[if IE 7]!--/a!--![endif]-- <br/>
!--[if lte IE 6]tabletrtd![endif]-- <br/>
ul <br/>
lia href=\\\"#\\\"正则表达式简介/a/li <br/>
lia href=\\\"#\\\"正则表达式之道/a/li <br/>
/ul <br/>
!--[if lte IE 6]/td/tr/table/a![endif]-- <br/>
/li <br/>
lia href=\\\"#\\\"网站优化/a/li <br/>
lia href=\\\"#\\\"电脑网络/a/li <br/>
lia href=\\\"#\\\"建站技术 <br/>
!--[if IE 7]!--/a!--![endif]-- <br/>
!--[if lte IE 6]tabletrtd![endif]-- <br/>
ul <br/>
lia href=\\\"#\\\"HP/a/li <br/>
lia href=\\\"#\\\"ASP/a/li <br/>
lia href=\\\"#\\\"ASP.NET/a/li <br/>
lia href=\\\"#\\\"JSP/a/li <br/>
lia href=\\\"#\\\"SQL/a/li <br/>
lia href=\\\"#\\\"Flash/a/li <br/>
lia href=\\\"#\\\"Dreamweaver/a/li <br/>
/ul <br/>
!--[if lte IE 6]/td/tr/table/a![endif]-- <br/>
/li <br/>
/ul <br/>/div <br/>/body <br/>/html<br/>
回复

使用道具 举报

千问 | 2013-10-28 08:39:49 | 显示全部楼层
+1
                已赞过
回复

使用道具 举报

千问 | 2013-10-28 08:39:49 | 显示全部楼层
对不起我不知道 呵呵
回复

使用道具 举报

千问 | 2013-10-28 08:39:49 | 显示全部楼层
+1
                已赞过
回复

使用道具 举报

千问 | 2013-10-28 08:39:49 | 显示全部楼层
可以下载个 渴切-开源中文css框架 或者 bootstrap 里面就有
回复

使用道具 举报

千问 | 2013-10-28 08:39:49 | 显示全部楼层
+1
                已赞过
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

千问

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
回复楼主 返回列表
热门排行