打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
一款灰色风格纯CSS横向下拉菜单
JT_man
>《菜单导航》
2014.02.17
关注
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" c /><title>一款灰色风格纯CSS横向下拉菜单丨myjs.jz123.Cn</title><style type="text/css">/* common styling *//* set up the overall width of the menu div, the font and the margins */.menu {font-family: arial, sans-serif;width:750px;margin:0;margin:50px 0;}/* remove the bullets and set the margin and padding to zero for the unordered list */.menu ul {padding:0;margin:0;list-style-type: none;}/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */.menu ul li {float:left;position:relative;}/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */.menu ul li a, .menu ul li a:visited {display:block;text-align:center;text-decoration:none;width:104px;height:30px;color:#000;border:1px solid #fff;border-width:1px 1px 0 0;background:#c9c9a7;line-height:30px;font-size:11px;}/* make the dropdown ul invisible */.menu ul li ul {display: none;}/* specific to non IE browsers *//* set the background and foreground color of the main menu li on hover */.menu ul li:hover a {color:#fff;background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li:hover ul {display:block;position:absolute;top:31px;left:0;width:105px;}/* style the background and foreground color of the submenu links */.menu ul li:hover ul li a {display:block;background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li:hover ul li a:hover {background:#dfc184;color:#000;}</style><!--[if lte IE 6]><style type="text/css">/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover *//* Get rid of any default table style */table {border-collapse:collapse;margin:0;padding:0;}/* ignore the link used by 'other browsers' */.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}/* set the background and foreground color of the main menu link on hover */.menu ul li a:hover {color:#fff;background:#b3ab79;}/* make the sub menu ul visible and position it beneath the main menu list item */.menu ul li a:hover ul {display:block;position:absolute;top:32px;left:0;width:105px;}/* style the background and foreground color of the submenu links */.menu ul li a:hover ul li a {background:#faeec7;color:#000;}/* style the background and forground colors of the links on hover */.menu ul li a:hover ul li a:hover {background:#dfc184;color:#000;}</style><![endif]--></head><body><div class="menu"><ul><li><a class="hide" href="#nogo">DEMOS</a><!--[if lte IE 6]><a href="#nogo">DEMOS<table><tr><td><![endif]--><ul><li><a href="#nogo">zero dollars</a></li><li><a href="#nogo">wrapping text</a></li><li><a href="#nogo">styled form</a></li><li><a href="#nogo">active focus</a></li><li><a href="#nogo">shadow boxing</a></li><li><a href="#nogo">image map</a></li><li><a href="#nogo">fun backgrounds</a></li><li><a href="#nogo">fade scrolling</a></li><li><a href="#nogo">em sized images</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">MENUS</a><!--[if lte IE 6]><a href="#nogo">MENUS<table><tr><td><![endif]--><ul><li><a href="#nogo">spies menu</a></li><li><a href="#nogo">vertical menu</a></li><li><a href="#nogo">enlarging list</a></li><li><a href="#nogo">link images</a></li><li><a href="#nogo">non-rectangular</a></li><li><a href="#nogo">jigsaw links</a></li><li><a href="#nogo">circular links</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">LAYOUTS</a><!--[if lte IE 6]><a href="#nogo">LAYOUTS<table><tr><td><![endif]--><ul><li><a href="#nogo">Fixed 1</a></li><li><a href="#nogo">Fixed 2</a></li><li><a href="#nogo">Fixed 3</a></li><li><a href="#nogo">Fixed 4</a></li><li><a href="#nogo">minimum width</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">BOXES</a><!--[if lte IE 6]><a href="#nogo">BOXES<table><tr><td><![endif]--><ul><li><a href="#nogo">spies menu</a></li><li><a href="#nogo">vertical menu</a></li><li><a href="#nogo">enlarging list</a></li><li><a href="#nogo">link images</a></li><li><a href="#nogo">non-rectangular</a></li><li><a href="#nogo">jigsaw links</a></li><li><a href="#nogo">circular links</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">MOZILLA</a><!--[if lte IE 6]><a href="#nogo">MOZILLA<table><tr><td><![endif]--><ul><li><a href="#nogo">drop down menu</a></li><li><a href="#nogo">cascading menu</a></li><li><a href="#nogo">content:</a></li><li><a href="#nogo">mozzie box</a></li><li><a href="#nogo">rainbow box</a></li><li><a href="#nogo">snooker cue</a></li><li><a href="#nogo">target practise</a></li><li><a href="#nogo">two tone headings</a></li><li><a href="#nogo">shadow text</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">EXPLORER</a><!--[if lte IE 6]><a href="#nogo">EXPLORER<table><tr><td><![endif]--><ul><li><a href="#nogo">example one</a></li><li><a href="#nogo">weft fonts</a></li><li><a href="#nogo">vertical align</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="#nogo">OPACITY</a><!--[if lte IE 6]><a href="#nogo">OPACITY<table><tr><td><![endif]--><ul><li><a href="#nogo">opaque colours</a></li><li><a href="#nogo">opaque menu</a></li><li><a href="#nogo">partial opacity</a></li><li><a href="#nogo">partial opacity II</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><!-- clear the floats if required --><div class="clear"> </div></div></body></html>
一款灰色风格纯CSS横向下拉菜单
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
【热】
打开小程序,算一算2024你的财运
纯CSS酷黑风格三级下拉菜单代码
切换css类
导航条代码 css下拉菜单
Div CSS布局入门教程(二)
学习使用XHTML的12天
建站教程>CMS建站>div+css布局中UL和LI的使用方法介绍
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×