暖色调的CSS下拉菜单，可支持二级

2024-09-05 12:19:13

字体：大中小

来源：转载

供稿：网友

二级导航菜单，基于CSS实现，采取下拉的方式，这款下拉菜单颜色看上去很舒服，暖色调，给人温暖的感觉。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二级下拉导航菜单</title><style type="text/css">.menu {font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left; position:relative;}.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;}.menu ul li ul {display: none;}.menu ul li:hover a {color:#fff; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; top:31px; left:0; width:105px;}.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}</style></head><body><div class="menu"><ul><li>DEMOS<ul><li>zero dollars</li><li>styled form</li><li>active focus</li><li>em sized images</li></ul></li><li>MENUS<ul><li>spies menu</li><li>vertical menu</li><li>circular links</li></ul></li><li>LAYOUTS<ul><li>Fixed 1</li><li>minimum width</li></ul></li><li>BOXES<ul><li>spies menu</li><li>circular links</li></ul></li><li>MOZILLA<ul><li>drop down menu</li><li>shadow text</li></ul></li><li>EXPLORER<ul><li>weft fonts</li><li>vertical align</li></ul></li><li>OPACITY<ul><li>opaque colours</li><li>opaque menu</li></ul></li></ul><div class="clear"> </div></div></body></html>

上一篇：CSS三级下拉式弹出菜单代码

下一篇：绝对经典的滑动门特效代码