模仿Windows顏色的豎向多級CSS菜單

2024-09-05 12:19:50

字體：大中小

來源：轉載

供稿：網友

和Windows窗體顏色相似的豎向多級CSS菜單，看上去還不錯哦，畢竟是用純CSS代碼實現，符合W3C標準，兼容性也不錯，滑過變色，操作體驗很好。

<!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" lang="gb2312" xml:lang="gb2312"><head><title>和Windows窗體顏色相似的豎向多級CSS菜單</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>#navcontainer { margin-left: 30px; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; font-family: sans-serif; } #navcontainer li { margin: 0; } #navcontainer a { display: block; padding: 5px 10px; width: 140px; color: #000; background-color: #ADC1AD; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #333; border-right: 1px solid #333; font-weight: bold; background-repeat: no-repeat; background-position: 0 0; } #navcontainer a:hover { color: #000; background-color: #889E88; text-decoration: none; border-top: 1px solid #333; border-left: 1px solid #333; border-bottom: 1px solid #fff; border-right: 1px solid #fff; background-repeat: no-repeat; background-position: 0 0; } #navcontainer ul ul li { margin: 0; } #navcontainer ul ul a { display: block; padding: 5px 5px 5px 30px; width: 125px; color: #000; background-color: #C5D8C5; text-decoration: none; font-weight: normal; } #navcontainer ul ul a:hover { color: #000; background-color: #889E88; text-decoration: none; }</style></head><body><div   class="iwvjtn8m0"   id="navcontainer"> <ul id="navlist"> <li id="active">網站主頁  <ul id="subnavlist"> <li id="subactive">軟件下載</li> <li>ASP源碼</li> <li>PHP源碼</li> <li>.NET源碼</li> </ul> </li> <li>網頁特效</li> <li>最新更新</li> <li>關注排行</li> </ul> </div></body></html>

上一篇：新手學CSS寫的滑動變色菜單

下一篇：Vista風格菜單，完全CSS實現