簡(jiǎn)潔CSS導(dǎo)航菜單（藍(lán)色）

2024-09-05 12:19:25

字體：大中小

供稿：網(wǎng)友

一款非常簡(jiǎn)潔的CSS導(dǎo)航菜單，藍(lán)色風(fēng)格，來(lái)自老外網(wǎng)站，鼠標(biāo)放到每一個(gè)菜單項(xiàng)都會(huì)能一個(gè)提示信息，用戶體驗(yàn)很好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS Menu Blue</title><style>ul#blue { margin:0; padding:0; list-style-type:none; }ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}ul#blue .current { border-top:4px solid #3d496a;}ul#blue li:hover { border-top:4px solid #3d496a;}ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana; color:#68759c;}ul#blue li a:hover { color:#8895b8; border:none; }ul#blue li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 12px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}</style></head><body>	<ul id="blue">		<li id="70qarhlowxag" class="current">MainThis is Home Pages!</li>		<li>About Us源代碼下載</li>		<li>PortfolioOur portfolio showcases</li>		<li>AjaxAJAX技術(shù)源碼區(qū)</li>		<li>Contact Us聯(lián)系以及網(wǎng)站合作</li>	</ul></body></html>

上一篇：紅黑風(fēng)格的CSS首頁(yè)導(dǎo)航條

下一篇：清新帶圓角的CSS豎向菜單