CSS下拉菜单

2024-09-05 12:19:33

字体：大中小

来源：转载

供稿：网友

纯CSS实现的下拉菜单，非常简洁简洁实用，美观大方，导航菜单没有必要搞那么复杂，只要让用户很方便的找到想要的内容就可以了，可以试下这一款。

<!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><style>.menucontainer{background: #fff url(/jscss/demoimg/200904/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/200904/bgOFF2.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;height:24px;color:#000;border:1px solid #fff;border-width:0 1px 0 0;padding:0px 16px 0px 16px;line-height:24px;}* 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/200904/bgON2.gif) top left repeat-x;}.menu ul li:hover ul {display:block;position:absolute;top:23px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;}.menu ul li:hover ul li a {display:block;background:#757575;color:#fff;height:auto;line-height:16px;padding:5px 16px 5px 16px;width:120px;}.menu ul li:hover ul li a:hover {background:#202D3D;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>Strategy</li><li>Analysis</li></ul></td></tr></table></li><li>Support</li><li>Forums</li><li>Contact</li></ul></div></div></body></html>

上一篇：CSS菜单（可下拉）银灰色

下一篇：JavaScript动态选项卡添加的实现

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注