纯CSS下拉菜单

2024-09-05 12:19:30

字体：大中小

来源：转载

供稿：网友

又一个漂亮的纯CSS实现的下拉导航菜单，横向布局，适合作网站导航条，银色渐变色，鼠标放上更换菜单背景，用户体验极好，而且兼容性好，特别是对IE比较友好，火狐下也几乎不错位，推荐给站长使用。

<!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><title>CSS下拉菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gbk"><style>.menucontainer{background: #fff url(/jscss/demoimg/200903/bgoff2.gif) top left repeat-x;}.menu {float:left;font-family: sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold;background:url(/jscss/demoimg/200903/bgOFF.gif) repeat-x;}.menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}.menu ul li {float:left;position:relative;display:inline;}.menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#000;width:auto;color:#000;border:1px solid #fff;border-width:0 1px 0 0;padding:0px 16px 0px 16px;line-height:25px;}* html .menu ul li a, .menu ul li a:visited {width:auto;w/idth:auto;}.menu ul li ul {display:none;}table {margin:-1px;border-collapse:collapse;font-size:11px;}.menu ul li:hover a {color:#fff;background:#ccc url(/jscss/demoimg/200903/bgon2.gif) top left repeat-x;}.menu ul li:hover ul {display:block;position:absolute;top:24px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;}.menu ul li:hover ul li a {display:block;background:#E9E9E9;color:#000;height:auto;line-height:16px;padding:2px 16px 2px 16px;width:120px;}.menu ul li:hover ul li a:hover {background:#896296;color:#fff;}</style></head><body><div class="menucontainer"><div class="menu"><ul><li>Home</li><li>About us</li><li>Services<table><tr><td><ul><li>Design</li><li>Product</li><li>Analysis</li></ul></td></tr></table></li><li>Support</li><li>About</li><li>Contact Us</li></ul></div></div></body></html>

上一篇：黑蓝渐变的CSS下拉菜单

下一篇：立体按钮效果的竖直菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注