暖色調的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   id="iwvjtn8m0"   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   id="iwvjtn8m0"   class="clear"> </div></div></body></html>

上一篇：CSS三級下拉式彈出菜單代碼

下一篇：絕對經典的滑動門特效代碼